即使將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設置爲塊元素，爲什麼我無法將圖像置中？

回答

相關問題