爲什麼「text-align：center」適用於「div」，但不適用於「img」？

下面是一個例子：爲什麼「text-align：center」適用於「div」，但不適用於「img」？

p, span, div,img { 
 
    text-align: center; 
 
}

<p>Para</p> 
 
<span>Span</span> 
 
<div>Div</div> 
 
<img src="https://www.google.com/images/nav_logo195.png" /> 
 
<div><img src="https://www.google.com/images/nav_logo195.png" /></div>

我發現申請text-align: center上img直接不起作用。

這是否意味着當需要居中圖像時，它必須包裹在空的div中？

有沒有更好的方法來做到這一點？

來源

2015-06-12 Hanfei Sun

text-align: center水平居中它適用於容器的內聯內容。所以是的，要中心圖像（內嵌佈局）裏面的容器（塊佈局），你應該將此CSS應用於容器，而不是圖像。

來源

2015-06-12 09:17:45 potashin

text-align將文本（和其他內聯）內容與其應用的元素對齊。

有沒有內容裏面的圖像。

您可以：

使圖像顯示爲一個塊，然後使用自動邊緣
把它放在任何塊元素中（它沒有成爲一個div，但是這通常是如果你只是居中，最明智的選擇）並在該容器上設置文本對齊。

來源

2015-06-12 09:18:03 Quentin

我確定你知道這一點，但也許可以將「text-align」添加到身體作爲第三種選擇？ – jbutler483

@ jbutler483 - 這是第二種選擇。正文是一個塊元素。一般而言，您不希望將所有內容放在頁面的默認位置，這意味着必須經過並將所有段落再次對齊。 – Quentin

這是真的我想。我能想到的最後一種選擇是定位，但它又不會太過分，因爲它會搞亂DOM流。 +1回答這個問題，但也提供了一個替代方案:) – jbutler483

而是在img標籤使用text-align的，它用在DIV

p, span, div,img { 
 
    text-align: center; 
 
} 
 
#testimg { 
 
    width:100%; 
 
    position:absolute; 
 
    overflow:auto; 
 
    top:50px; 
 
    height: 100%; 
 
    }

<div id="testimg"> 
 
    <img src="https://www.google.com/images/nav_logo195.png" /> 
 
</div>

來源

2015-06-12 09:25:29 Bruce

***什麼是與內聯樣式***？另外，當你使用'height'時，爲什麼要給出'top'和'bottom'聲明？你的回答裏有很多「絨毛」。 – jbutler483

因爲我使用溢出是沒有指定高度，它會隱藏圖像。爲了造型，我使用底部和頂部...... – Bruce

這恐怕是位置元素的一個不好的實現。我幾乎完全刪除了「底部」，但是接下來又有很多需要修改的地方:([For Example]（http://jsfiddle.net/jbutler483/sa5Lebo0/1/） – jbutler483

如果要居中的IMG用途：

img { 
    display: block; 
    margin 0 auto; 
}

來源

2015-06-12 09:30:04

爲什麼「text-align：center」適用於「div」，但不適用於「img」？

回答

相關問題