Vertically centering items

[Kristina Fisher]

Hi Bill,

I’d like to vertically center the “Donate Now” button in the header section (in other words, have it sit in the middle of the white space when it’s viewed at the desktop size, rather than at the top as it is currently). I’d also like to style the table on this page so that the contents are vertically centered, rather than aligned at the top. Could you please advise me how to code that?

Thanks again for all your help!

-Kristina

[Bill Robbins]

Good Afternoon Kristina,

You can do both of those things. Here’s how:

1. Go to the Appearance section in your WordPress dashboard and click on Customize.
2. Choose the Advanced section and select Custom CSS.
3. Paste this in the box for the Custom CSS:

   
   table th,
   table td {
     vertical-align: middle;
   }
   
   @media only screen and (min-width: 1024px) {
   	
   	#header-widget {
   		margin-top: 35px;
   	}
   
   }
   

   The top style will align your table to the middle and the bottom one will change the position of the header widget’s donate button on larger screens. Feel free to adjust the 35px to a different value if you want to. Also with the table the images will still be at the top due to the margins that are automatically applied to images inserted by WordPress (alignleft, alignright, aligncenter, alignnone). If you need to take those out, use this CSS:

   
   table .alignleft,
   table .alignright,
   table .aligncenter,
   table .alignnone {
   	margin: 0;
   }
   

4. Save your changes.

Let me know if you have any questions,
Bill

[Author]

Posts