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 Blaize Pennington
Blaize Pennington
13,879 Points

How do you adjust the vertical align in CSS?

OK to start I've tried the vertical-align property with no avail. I also tried adjusting padding and margin and it affects both the image and the text. Here is my code:

html

<h3 id="mango">Enchanted Mango</h3>

css

h3 {
    margin: 0;
    font-size: 75px;
    vertical-align: middle;
}

/*** Icon Images *****************/

h3::before {
    display: inline-block;
    color: white;
    background-size: 85px 62px;
    background-repeat: no-repeat;
    content: "";
    width: 85px;
    height: 62px;
    border-radius: 5px;
    margin-right: 8px;
}

#mango::before {
    background: url("img/enchanted_mango.png");

}

The text and the before element are aligned at the bottom and I want the text to be in the middle.

1 Answer

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Vertical alignment is something that has been the bane of web developers since the history of ever. EVER.

Vertical alignment is only effective on inline or table-cell elements. Flexbox makes it a whole lot easier to vertically align elements, and actually has pretty great support now, although it needs to be prefixed for IE10 (and doesn't work for IE9 or earlier) and can be spotty in older versions of Android browsers, as seen here. If you're interested in flexbox, css-tricks has a great cheat sheet.

You can take a look at how the vertical-align property works on MDN.