91

I am having an issue with line-height that I cannot quite get my head around.

The following code will center an image within a div:

CSS

.bar {
    height: 800px;
    width: 100%;
    line-height:800px;
    background-color: #000;
    text-align: center; 
}

.bar img {
    vertical-align: middle;   
}

HTML

<div class="bar">
    <img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

However, if I change the line height to 100%, then the line height does not take effect (or at least does not become 100% of the div).

Example jsfiddle

Does anyone know what I am doing wrong?

0

10 Answers 10

208

line-height: 100% means 100% of the font size for that element, not 100% of its height. In fact, the line height is always relative to the font size, not the height, unless its value uses a unit of absolute length (px, pt, etc).

4
  • 3
    Ah. It is always the silly mistakes that get me. Thanks! I'll accept your answer when it lets me. May 20, 2011 at 12:42
  • 3
    Apparently they spec authors mistakenly thought that no one would want to set the font size/line height relative to the height of the element...
    – Andy
    Aug 27, 2015 at 18:18
  • 1
    @Andy: The good (?) news is that this will soon be made possible through the use of cascading variables. Only a few years of waiting...
    – BoltClock
    Aug 27, 2015 at 18:24
  • vh is an exception. In CSS3, if you set it as 100vh, it will actually work as some devs may want it. Do note though, that it doesn't work on older browsers that don't support CSS3.
    – Philll_t
    Mar 28, 2017 at 20:45
107

I add this CSS to the div that I want to center:

div:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

This works every time and it is clean.

Just for completion's sake, I use scss and I have a handy mixin that I include on every parent whose direct children I want to have vertically centered:

@mixin vertical-align($align: middle) {
  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: $align;
    // you can add font-size 0 here and restore in the children to prevent
    // the inline-block white-space to mess the width of your elements
    font-size: 0;
  }
  & > * {
    vertical-align: $align;
    // although you need to know the font-size, because "inherit" is 0
    font-size: 14px;
  }
}

Full explanation: div:before will add an element inside the div, but before any of its children. When using :before or :after we must use a content: declaration otherwise nothing will happen, but for our purpose, the content can be empty. Then we tell the element to be as tall as its parent, as long as its parent's height is defined and this element is at least inline-block. vertical-align defines the vertical position of self related to parent, as opposed to text-align that works differently.

The @mixin declaration is for sass users and it would be used like this:

div {
    @include vertical-align(middle)
}
0
38

When you use percentage as the line-height it is not based on the div container, rather its based on the font-size.

23

line-height: 100% would be an easy way to vertically center elements, if it was calculated in relation to the container, but that would be too easy, hence it doesn't work.

So instead, it is just another way of saying line-height: 1em (right?)

Another way of vertically centering an element would be:

.container {
     position:relative;
}
.center {
     position:absolute;
     top:0; left:0; bottom:0; right:0;
     margin: auto;
     /* for horiz left-align, try "margin: auto auto auto 0" */
}
4
  • 1
    This doesn't work for me...not sure if I'm missing something. Feb 24, 2014 at 17:49
  • 1
    @clifgriffin, try setting a fixed width and height on both the container and the "center" child, making sure that the child is smaller than then container. The child should end up centered horizontally and vertically within the container.
    – Rolf
    Feb 25, 2014 at 12:53
  • @clifgriffin make sure the container has the correct width and height, you could be centering everything in a div the same size. This was the adjustment I had to make. Sep 27, 2016 at 5:56
  • @user3576887 "that would be too easy, hence it doesn't work" is exactly why I'm downvoting this - there's a very good reason why it doesn't work the way you would want to here, and this shouldn't be obscured for the purpose of entertainment, criticism, or whatever it's supposed to be. May 9, 2017 at 7:46
11

might not be pretty, but it's working, and its semantic;

<div class="bar" style="display: table; text-align: center;">
    <img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

display: table-cell gives an element the unique table ablillity to align verticaly (atleast i think its unique)

3
  • Thanks for the answer, I tried your code but it does not seem to work for me. May 20, 2011 at 13:18
  • hmm, thats a bit strange; if you can post some of your code so i can take a closer look at it, i might be able to help more May 20, 2011 at 13:41
  • Olsson - I just pasted your code into a JSFiddle and it did not work. Thanks for the offer of help - but I can get away with setting an absolute line-height for now. If that changes I will look further into your answer. Thanks again for the help! May 20, 2011 at 15:17
6

This is a very late answer, however in modern browsers, assuming that the parent element is 100% of the screen height as well, you can use the vh viewport unit. FIDDLE

line-height: 100vh;

Browser support

0
2

A more modern approach is to use flexbox for this, it is simpler and cleaner. However, flexbox is an entirely different paradigm from what inline-block, float or position used to be.

To align items inside .parent you do:

.parent {
  display: flex;
  align-items: center;
}

That is about it. Children of flex parents are automatically converted to flex child items.

You should read more about flexbox, a good place to start is this cheat sheet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2

This is the modern solution in which you need to set the following CSS in the container div or outer div.

.outer-div {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Another following solution may be applied to the element which you want to make centered vertically. Note that the outer or container div should be

.inner-div {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

Note that the outer or container div position should be relative.

1

This solution works in IE9 and above. First we set the child's top position to 50% (middle of the parent). Then using translate rule, shift the child up by a half of its actual height. The main benefit is that we don't need to define child's height, it's calculated by the browser dynamically. JSFiddle

.bar {
    height: 500px;
    text-align: center;
    background: green;
}
.bar img {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}
0

You can set line-height based on that element height. If the element height 200px means you need to set line height to 200px to center the text.

span {
  height: 200px;
  width: 200px; 
  border: 1px solid black;
  line-height: 200px; 
  display: block;
}
<span>Im vertically center</span>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.