What's Going On
Given that you want it work be centered vertically, the only answer here so far is to give .menu
styling of vertical-align:middle
. That won't work. To center vertically, you need to use a position
trick. You give the item a position:absolute
, then you tell it to be top:50%
, which will place the top of that item at 50% down.
We want the center of the item to be in the center of the container though, not the top to be at the center. So we finally add margin-top
of a negative value. That negative value is half the object's height, in this case, 80px
/ 2 = 40px
. To center horizontally, we'll need to do the same. margin:0 auto
won't work now given that it's positioned absolutely.
Code
In the end, you will change this:
.logo {
background:url(../img/Untitled-1.png) no-repeat center;
width:262px;
height:80px;
margin:0 auto;
}
To this:
.logo {
background:url(../img/Untitled-1.png) no-repeat center;
width:262px;
height:80px;
position:absolute;
top:50%;
margin-top:-40px;
left:50%;
margin-left:-131px;
}
Working Fiddle