我花了很长时间试图找出为什么我不能集中我的img元素。我已将它设置为块元素,并将边距设置为自动。然而,显示屏始终显示余量小于余量的权利。即使将img设置为块元素,为什么我无法将图像置中?
如果有人能帮助将非常感激。
#header {
width: 100%;
height: 30px;
}
body {
margin: 0;
}
li {
display: inline;
}
a {
display: inline-block;
text-decoration: none;
color: #000;
margin-right: 3px;
font-family: arial, sans-serif;
font-size: 12px;
}
ul {
float: right;
}
#logo {
position: relative;
top: 200px;
}
#logo img {
display: block;
margin: auto;
height: 92px;
}
#logo p {
position: absolute;
top: 3.5em;
left: 51em;
}
<div id="header">
<ul>
<li><a href="#">Gmail</a></li>
<li><a href="#">Images</a></li>
<li>
<a href="#"><img src=""></a>
</li>
<li>
<a href="#"><img src=""></a>
</li>
<li>
<a href="#"><img src=""></a>
</li>
</ul>
</div>
<div id="content">
<div id="logo"><img src="https://www.google.com.au/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<div id="search"></div>
<div id="button1"></div>
<div id="buttton2"></div>
</div>
<div id="footer"></div>
无法复制:https://jsfiddle.net/qgxhdg24/ –
不知道为什么它看起来好了那些家伙,但我可以肯定它不是在通过的jsfiddle中心@JayGould – Lee
作为一个建议的话总是使用reset.css(如果你还没有使用),以便更好地控制样式。 – Ayan