Vertically aligning elements in parent div

Question

I am having an issue with elements not vertically aligning in the middle of it's parent div.

CSS:

/* Main body structure */

body{
    font-size:0.5em;
}

.main-wrapper {
    width: 90%; 
    margin: auto; 
    background-color: #efefef;
}

* {
    box-sizing: border-box;
}


/* Main header/logo/navigation structure */

.main-header {
    padding: 20px; 
    background-color: #003;
    display:table;
    width: 100%;
    min-height: 150px;
}

.main-logo, 
.main-nav, 
.main-nav li {
    display: inline-block;
}

.main-logo, 
.main-nav, {
    display: table-cell;
    vertical-align: middle; 
}

.main-logo, 
.main-nav li { 
    padding: 10px 20px; 
    border-radiues: 5px;
    background-color:#3CC;
}

.main-nav li {
    margin-right: 10px;
    display:inline-block;
}

.main-logo {
    background-color:#3F6;
}

.main-nav {
    padding: 10px;
}

.main-logo a,
.main-nav a {
    color: #FFF;
    text-decoration:none;
    display:block;
    text-align:center;
    padding: 10px 20px;     
}


@media ( max-width: 768px) {
    .maing-logo,
    .main-nav,
    .main-nav li {
        display:block;
        width: initial;
        margin: initial;
    }
    .main-nav {
        padding-left: initial;
    }
    .main-nav li {
        margin-top: initial;
}

HTML:

<div class="main-wrapper">
    <header class="main-header">
        <h1 class="main-logo"><a href="#">logo</a></h1>
        <div class="main-nav">
        <ul class="main-nav">
            <li><a href="#">HOME</a></li>
            <li><a href="#">SEARCH</a></li>
            <li><a href="#">MESSAGES</a></li>
            <li><a href=logout.php>LOGOUT</a></li>
        </ul>
    </header>
</div>

So the issue being that if I alter the min-height of the main-header class the elements stay in the same place and do not automatically adjust but my code looks like it should be automatically middle aligning the elements?

So the issue being that if I alter the min-height of the main-header class the elements stay in the same place and do not automatically adjust but my code looks like it should be automatically middle aligning the elements? — user3520443, Apr 13 '14 at 11:50
So if I adjust the min-height of the main-header class the contents inside i.e the logo and the list remain in the middle no matter what height the height of the main-header is — user3520443, Apr 13 '14 at 11:51
I don't see anything wrong with your code .. check it in this fiddle and point out where the problem is .. http://jsfiddle.net/Karim_AG/Gx5Cc/ — Karim AG, Apr 13 '14 at 11:53
possible duplicate of [How do I vertically align text next to an image with CSS?](http://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css) — Unamata Sanatarai, Apr 13 '14 at 13:02

G-Cyrillus · Accepted Answer · 2014-04-13T13:37:58.900

if you use display:table; , you should use height and not min-height . Behavior of this display rule will do that the element will expand to fit its content anyway.

You have an extra , , that kills you rule .

correct is :

.main-header {
    padding: 20px; 
    background-color: #003;
    display:table;
    width: 100%;
    /*min-*/height: 150px;
}

.main-logo, 
.main-nav, 
.main-nav li {
    display: inline-block;
}

.main-logo, 
.main-nav/* , */ {
    display: table-cell;
    vertical-align: middle; 
}

Vertically aligning elements in parent div

1 Answers1