How do I center text in slogan vertically?

[ppovolni]

On this site that I’m working on http://www.mychristlife.net the “LISTEN TO OUR PODCAST FOR THE LATEST MESSAGES (BUTTON)” area is not centered vertically. How do I change it?

Topic

[Jason Bobich]

Hello,

If you know your text in the slogan is always going to be one line, you could just give it a line height that’s the height of the slogan. That would be one way you can vertically center text with CSS. — This may look a bit weird though as you scale down the site responsively.

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

.element-slogan .has_button .slogan-text { line-height: 58px; }

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[Author]

Replies