即使将img设置为块元素，为什么我无法将图像置中？

我花了很长时间试图找出为什么我不能集中我的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>

来源

2016-07-15 Chao Wang

无法复制：https://jsfiddle.net/qgxhdg24/ –

不知道为什么它看起来好了那些家伙，但我可以肯定它不是在通过的jsfiddle中心@JayGould – Lee

作为一个建议的话总是使用reset.css（如果你还没有使用），以便更好地控制样式。 – Ayan

你浮动标题但从来没有清除它。地址：

#content { 
    clear:both; 
}

jsFiddle example

来源

2016-07-15 13:30:47 j08691

够公平的，我猜你不需要删除高度值。在我做完之后，它使它正确无误，但也许是因为我正在做的事情。我将删除我的答案，因为你的问题解决了。 – Lee

非常感谢 –

-1

好了，这是因为在标题中微升，头部靠近标签之后，你应该添加

<div style="clear:both"></div>

#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 style="clear:both"></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>

来源

2016-07-15 13:29:03 mhyassin

谢谢您的详细解释 –

为什么要投票？ – mhyassin

即使将img设置为块元素，为什么我无法将图像置中？

回答

相关问题