Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Brandon Brigham
Brandon Brigham
3,716 Points

Very simple text appearance change...

Hi,

If you go to the page http://villa-terrazza.com/2014NewSite/indoor-fire/ You will see a brown box with the text: 'Move over, kitchen! The hearth is the new nucleus of the home…'

All I'm trying to do is center that text vertically so it looks better. Can't figure it out (I know, noob!)

Thanks for any help

1 Answer

Tim Knight
Tim Knight
28,888 Points

Brandon, since you're using tables the CSS reset at the top of style.css is messing things up for you. If you take that table cell and add the CSS attribute to adjust the vertical-align to middle instead of it's current "baseline" global setting that should fix it for you.

So do this:

<td class="vertical-center">
  <h3>Move over, kitchen!<br>
  The hearth is the new nucleus of the home…</h3>
</td>

.vertical-center {
  vertical-align: middle;
}
Tim Knight
Tim Knight
28,888 Points

Note too that your class can be anything, clearly mine isn't that creative.

James Barnett
James Barnett
39,199 Points

> clearly mine isn't that creative

But it is quite semantic