Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,240 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.