如何使顶部导航与徽标垂直居中？

Question

I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.

 /* Nav Section */ .nav { width: 100%; padding: 0; margin: 0; } .nav-contain { width: 1100px; margin: 0 auto; padding: 0; overflow: hidden; } .logo { z-index: 10; display: inline-block; background: #2980B9; padding: 65px 50px 35px 45px; font-size: 36px; line-height: 42px; color: #fff; text-align: center; } .logo a { color: #FFFFFF; text-decoration: none; } #medical { display: block; text-transform: uppercase; } .menu { padding: 0; margin: 0; float: right; display: table-cell; position: relative; } .menu a { text-decoration: none; color: #505050; font-weight: bold; } .menu ul { padding: 0; margin: 0; float: left; top: 50%; } .menu ul ul { padding: 0; margin: 0; } .menu ul li { float: left; display: block; margin-left: 45px; } .menu ul ul { position: absolute; left: -999px; } .menu ul li:hover ul { left: auto; } .menu ul li ul li { margin-left: 0; float: none; margin-top: 15px; } 

 <div class="nav"> <div class="nav-contain"> <div class="logo"> <a href="#"><span id="medical">Medical</span><span id="company"> Company</span></a> </div> <!-- Logo --> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul class="dropdown"> <li><a href="#">Sample</a></li> <li><a href="#">Sample</a></li> </ul> </li> <li><a href="#">Gallery</a></li> <li><a href="#">Prices</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- Menu --> </div> <!-- Nav Contain --> </div> <!-- Nav --> 

Answer 1

Remove float:right on .menu , and set both .logo and .menu to this:

.logo, .menu {
    display: inline-block;
    vertical-align: middle;
}

If you need .menu to stay on far right side, also add this:

.nav-contain {
    text-align: justify; 
}
.nav-contain:after{
    content: '';
    display: inline-block;
    width: 100%;
}

How it works:

1. Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.

2. Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.

Answer 2

One easy way to center here is to use Flexbox:

.nav-contain {
    /* what is already there */
    display: flex;
    align-items: center;
}

Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).

This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.

Answer 3

Try:

.menu > ul > li {
    min-height:50px;
    display: table;
}
.menu > ul > li > a {
    display: table-cell;
    vertical-align: middle;
}

http://jsfiddle.net/rawat/4h05rq2s/

Answer 4

Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:

.nav-contain {
    width: 1100px;
    margin: 0 auto;
    line-height: 184px;
    padding: 0;
    overflow: hidden;
}

Note the line-height. This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.