无法将徽标置于中心位置

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

如果您将宽度设为“值”而不是非现有对象的百分比，则可以正常工作，即没有任何内容，因此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;
}

Answer 2

您可以尝试在div上使用text-align：center样式。我更喜欢使用类并使用CSS中的类来为元素添加样式。所以我会做这样的事情，添加一个类来分类：“logo”并设置在CSS之后：

.logo {    背景色：＃222222;    高度：50像素;    保证金：汽车;    text-align：center;    }

或您的情况：

#header {    背景色：＃222222;    高度：50像素;    保证金：自动    text-align：center;    }