CODEWITHSUNDEEP
htmlcss
Elfayer
Elfayer

Reputation: 4571

How to use vertical-align with line-height?

I have elements from a div that goes out of their container because I use line-height. But the only way I found to make vertical-align work is by using line-height.

Can anyone explain me why I have that behavior and how to fix it ?

Also do anyone have advices or best practices on how to use vertical-align ?

Here is the code :

#resources {
    background-color: green;
    width: 100%;
    height: 64px;
}

.resourceContainer {
    float: left;
    text-align: center;
    vertical-align: middle;
    line-height: 64px;
    width: 33.3%;
}

Example (Don't pay intention to images path)

Upvotes: 0

Views: 77

Answers (1)

King King
King King

Reputation: 63387

You just need to reset the line-height for the inner div (because the line-height is inheritant):

.resourceContainer > div {
  display:inline-block;
  line-height:100%;
  vertical-align:middle;     
}

Demo

NOTE: The vertical-align is applied to the element itself not to the child elements. So you don't need to set vertical-align:middle for the .resourceContainer, instead set it for the direct inner div.

Upvotes: 2

Related Questions