Navbar 100％的页面，中心图像

Question

好吧，我已经开始让自己成为一个我正在开发的项目的网站。我目前正在整理我的网站的布局，但是卡在导航栏上。

我希望我的导航栏跨越网站的100％，并水平/垂直居中我的按钮（图像）。

我得到了什么作品......但我只是想知道我是否以最有效的方式做到了这一点？

这是我的html。

<div id="wrapper"> 
    <div id="header"> 

    <div id="navbar_left"> 
    </div> 

    <div id="navbar_buttons"> 
     <img src="../Originals/button_home.png" /> 
     <img src="../Originals/button_logo.png" /> 
    </div> 

    <div id="navbar_right"> 
    </div> 

    </div> 
</div> 

这里是我的CSS：

#wrapper { 
    width: 100%; 
    margin: 0 auto; 
    padding: 0; 
} 

#header { 
    height: 123px; 
    width: 100%; 
    background-image: url(../../Originals/header_background.png); 
} 

#navbar_left { 
    width: 25%; 
    height: 123px; 
    float: left; 
} 

#navbar_buttons { 
    height: 123px; 
    width: 50%; 
    float: left; 
    line-height: 123px; 
    text-align:center; 
} 

#navbar_buttons::after { 
    content: "."; 
    visibility: hidden; 
} 

#navbar_right { 
    width: 25%; 
    height: 123px; 
    float: left; 
} 

Answer 1

退房this jsFiddle为你怎么可以简化您的标记和CSS的一个例子。它使用inline-block为您的图像。

HTML（使用header元素）：

<div id="wrapper"> 
    <header> 
    <img src="http://placehold.it/200x100" /> 
    <img src="http://placehold.it/200x100" /> 
    </header> 
</div> 

和CSS：

header { 
    text-align: center; 
    background: #222; 
} 
header img { 
    display: inline-block; 
    vertical-align: bottom; 
} 

注意，一个div是display: block默认情况下，所以你不需要指定的100宽度％：它将填充可用宽度。同样，您不需要声明margin或padding，因为他们没有做任何事情。

我还可以避免声明一个固定的高度，如果你能避免它：只要让你的父母div扩大到其内容的高度。