CSS to vertically align text to middle of div

Question

What is the correct way to force text in a div to vertically align to the middle? I have found a couple 'tricks', but I need something that works with a single line and multiple lines. Hopefully I am missing something stupid simple:

http://jsfiddle.net/rogerguess/DawFy/

.header {
    display: inline-block;    
    text-align: center;
    width: 123px;
    background: green;
    border-radius: 4px 4px 4px 4px;
    height: 80px;
    vertical-align: middle;
}

<div >
    <div class="header">test1 </div>
    <div class="header">some text that will wrap</div>
    <div class="header">test3</div>
</div>

Possible Dup: http://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css — Ryan B, Apr 23 '13 at 15:14
Thanks Clive, but unfortunately table cell jacks up everything around it for some reason. I posted only a small portion of what I am doing on the page. — Roger, Apr 23 '13 at 15:35
kept playing with it.. and got table-cell to work. The issue was that table cell seems to ignore margins, so I added additional columns for the margins I wanted. Thanks — Roger, Apr 23 '13 at 15:53
If you've provided an element with a display type of table, rather than allowing the browser to insert an anonymous one, you can use the `border-spacing` property (it goes on the table element, not the table-cell). https://developer.mozilla.org/en-US/docs/CSS/border-spacing — cimmanon, Apr 23 '13 at 16:56

score 20 · Accepted Answer · answered Apr 23 '13 at 15:17

20

Change display: inline-block; to display: table-cell;

answered Apr 23 '13 at 15:17

Tiago César Oliveira

812
8
18

1

For the benefit of new readers of this answer, modern browsers now implement Flexbox very well. See http://www.w3schools.com/css/css3_flexbox.asp – authentictech Sep 23 '16 at 15:29

cimmanon · Answer 2 · 2013-10-01T14:47:23.117

If your multi-line elements need to wrap for responsive reasons, then your best bet is with Flexbox. Due to the flakiness of Firefox's 2009 Flexbox implementation, it has to be handled slightly differently than you would do it for modern Flexbox implementations.

http://codepen.io/cimmanon/pen/mxuFa

<ul>
  <li>One lorem ipsum dolor sit amet</li><!--
  --><li>Two</li><!--
  --><li>Three</li><!--
  --><li>Four</li><!--
  --><li>Five</li>
</ul>

li {
  text-align: center;
  vertical-align: middle;
  /* fallback for non-Flexbox browsers */
  display: inline-block;
  /* Flexbox browsers */
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  /* vertical centering for legacy, horizontal centering for modern */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  /* modern Flexbox only */
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  /* legacy Flexbox only */
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
}

All these Codes just to bring text in the Middle??... that's why I miss ` — ErickBest, Oct 01 '13 at 13:43
It's a byproduct of browsers implementing rough Flexbox drafts where property names have not been finalized on top of everyone prefixing everything. Realistically, all you *should* need is display, justify-content, and align-items. — cimmanon, Oct 01 '13 at 14:22
I realize that it's a lot of code, but this answer is perfect. It uses newer properties while also covering legacy browsers. +1 — , Jan 21 '14 at 01:00

score 2 · Answer 3 · answered Oct 11 '13 at 11:24

I've made a quick example for you, using display: table-cell property on the parent div.

CSS:
    .outer {
    width: 500px;
    height: 500px;
    display: table-cell;
    background-color: red;
    vertical-align: middle;
}

.inner {
    display: block;
    width: 300px;
    height: 200px;
    margin: 0px auto;
    background-color: yellow;
}

HTML: <div class="outer"> <div class="inner"> </div> </div>

http://jsfiddle.net/aKT42/

score 1 · Answer 4 · answered Apr 18 '14 at 07:29

Try this, it will work.

    <div class="greenBorder" id="outer">
         <div id="middle">
             <div class="greenBorder" id="inner">
             Your Text Here
             </div>
         </div>
    </div>

Css Class

    #outer {
        height: 100%;
        overflow: hidden;
        position: relative;
        width: 100%;
        display: table;
        position: static;
    }

    div.greenBorder {
        background-color: #39B9FF;
        text-align: center;
        color: white;
    }

    #middle[id] {
        display: table-cell;
        position: static;
        vertical-align: middle;
        width: 100%;
    }

    #middle {
        position: absolute;
        top: 50%;
    }

score 0 · Answer 5 · answered Apr 23 '13 at 15:22

http://jsfiddle.net/DawFy/16/

.header {

display: block;    
text-align: center;
    width: 123px;
background: green;
border-radius: 4px 4px 4px 4px;
height: 80px;
margin:0px auto;


}
li
 {
list-style-type:none;

 }

<div >
<li>
<div class="header">test1 </div>
<li>
    <div class="header">some text that will wrap</div>
<li>
    <div class="header">test3</div>

Try this dont know if its "correct" but works

score 0 · Answer 6 · answered Feb 06 '15 at 23:04

Most of these solutions wouldn't work for me because either the height was manually specified (which I couldn't do) or things like inline-block and float would remove the ability for the an inner div to inherit the parent div's height. I ended up creating a table with two columns each containing my divs and then I had no issues vertically centering text.

CSS to vertically align text to middle of div

6 Answers6

Linked