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 развернуть его высоту.