Vertical centering text/images in divs not working

Question

Been trying to vertically center 3 divs within another div and no matter what I try it doesn't work.

Please take a look at my example here: http://jsfiddle.net/d6sLpxvc/

My html:

<body class="mainBackground">
<header class="wrap">
    <div class="menuIcon">Menu Icon</div>
    <div class="pageTitle">Good morning, John Doe</div>
    <div class="logo">Logo</div>
    </div>
</header>
</body>

My CSS:

.wrap {
    height: 41px;
    background-color: gray;
    width: calc(100% - 34px);
    margin: 17px auto;
}
.menuIcon {
    display: table-cell;    
    float: left;
    vertical-align: middle;
}
.logo {
    float: right;
}
.pageTitle {
    text-align: center;
    vertical-align: middle;
}

The menu icon will actually be a small SVG icon with a fixed size of about ~28px. The logo on the right hand side also has a fixed size which has roughly double the height of the menu icon. I've used placed holder text for those images. The text in the middle MUST be centered horizontally as well within the browser canvas (not the div it's in).

The only thing that I absolutely need to do is use as little hardcoded pixel sizes as possible. So my end design must follow the psd's to the pixel but must be coded in percentages wherever possible. I'd like to stick with using width: calc(100% - 34px) if possible as well since this lets me use math for determining the div size. This means no using px to vertically center - I need to use percentages to vertically center these items in the div because they will change in the future and I cannot go back to adjust them to make sure they are always centered if the height is different(like menu icon or logo). Must work with IE9 - dont care about other browsers.

Would appreciate any help greatly!

score 2 · Answer 1 · answered Jan 13 '15 at 20:11

You can't use display: table-cell; without display: table; and display: table-row;, plus table cells can't float. this is updated fiddle, is this what you are looking for? More about centering could be found at css-tricks.com

HTML

<header class="wrap">
    <div class="row">
        <div class="menuIcon">Menu Icon</div>
        <div class="pageTitle">Good morning, John Doe</div>
        <div class="logo">Logo</div>
    </div>
</header>

CSS

.wrap {
    height: 41px;
    background-color: gray;
    width: calc(100% - 34px);
    margin: 17px auto;
    display: table;
}
.row {
    display: table-row;
}
.menuIcon {
    display: table-cell;    
    vertical-align: middle;
}
.logo {
    display: table-cell;
    vertical-align: middle;
}
.pageTitle {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

score 0 · Answer 2 · answered Jan 13 '15 at 19:34

try this:

.wrap {
    height: 41px;
    background-color: gray;
    text-align:center;
    width: calc(100% - 34px);
    margin: 17px auto;
}
.menuIcon {
      
    float: left;
   line-height: 41px;
}
.logo {
    float: right;
    line-height: 41px;
}
.pageTitle {
    text-align: center;

    display:inline-block;
    line-height: 41px;
}

<body class="mainBackground">
    <header class="wrap">
        <div class="menuIcon">Menu Icon</div>
        <div class="pageTitle">Good morning, John Doe</div>
        <div class="logo">Logo</div>
        </div>
    </header>
</body>

Thank you, I know I can use line-height to adjust, however the point is that I stick with percentages only because the logo height and menu icon may vary in height. So instead of manually adjusting it everything I need to code it in such a way that this will not become an issue in the future. — Quis, Jan 13 '15 at 21:07

Sleek Geek · Accepted Answer · 2015-01-14T16:02:04.717

You just need to apply line-height to the DIV's that are inside .wrap. The line-height property property value should be equal to to the height of .wrap for maximum result.

You can add line-height to them individually but the block of code below will do just that.

  .wrap  > div {
        line-height: 41px;
        display: inline;
        margin: 0 10px 0 50px;
}

.wrap {
    height: 41px;
    background-color: gray;
    width: calc(100% - 34px);
    margin: 17px auto;
    margin-top: 60px; /* Just for my presentation */
}

.wrap  > div {
    line-height: 41px;
    display: inline-block;
    margin: 0 10px 0 50px; /* Adjust to suit your need */
}


.menuIcon {
    display: table-cell;    
    float: left;
    vertical-align: middle;
}
.logo {
    float: right;
}
.pageTitle {
    text-align: center;
    vertical-align: middle;
}

<header class="wrap">
        <div class="menuIcon">Menu Icon</div>
        <div class="pageTitle">Good morning, John Doe</div>
        <div class="logo">Logo</div>
       
    </header>

score 0 · Answer 4 · edited May 23 '17 at 12:11

Look at this question: Vertical alignment of elements in a div

This fiddle is especially helpful: http://jsfiddle.net/techsin/FAwku/1/

Taken from a solution in that fiddle provided by a comment to the linked question:

<div class="top6">
    <div class="in6">6</div>
    <div class="in6"></div>
    <div class="in6"></div>
</div>

.top6 {background-color: blue; height: 100px; display:flex; align-items: center;}
.in6 {background-color: yellow; width: 30px; height: 30px; margin-right: 5px; }

Vertical centering text/images in divs not working

4 Answers4