Не удается получить логотип в центре

Question

Я не могу понять, почему этот логотип не центрируется. Пожалуйста помоги!

<div id="header" style="width:100%;" >
<a href="index.html"><img id="logo" src="images/logo384x80.png"/></a></div>

и CSS

#header {
background-color:#222222;
height:50px;
margin-left:auto;
margin-right:auto;

}

Answer 1

Вы можете попробовать использовать text-align: center style в div. Я предпочитаю использовать классы и использовать классы в CSS для добавления стилей к элементам. Поэтому я сделаю что-то вроде этого, добавив класс в div что-то вроде: "логотип" и установив следующий CSS:

.logo {background-color: # 222222; высота:50px; Маржа: авто; выравнивание текста: по центру; }

или для вашего случая:

#header {background-color: # 222222; высота:50px; поле: автоматическое выравнивание текста: центр; }

Answer 2

Это работает, если вы задаете ширину как "значение", а не как процент от несуществующего объекта, то есть, ничего не окружает, поэтому его ширина 100% ничего не значит.

Измените его, скажем, на 20em, и вы увидите разницу:

<div id="header" >
<a href="index.html"><img id="logo" src="http://www.beyondsecurity.com/assets/img/beyond-security-logo.png"/></a></div>

#header {
background-color:#222222;
width: 20em;
height: 50px;
margin-left:auto;
margin-right:auto;
}