如何將圖片放在中間？

Question

我想在一個範圍中心picutes。範圍有centerMe，但不影響圖片。

的centerMe標記：

.region.region-footer .centerMe{ 
    text-align: center; 
    } 

您可以在JSFiddle找到這個例子。

感謝所有幫助

Answer 1

這不會發生，因爲span是一個內聯元素。

text-align:center不影響它，因爲圖像的總寬度和跨度寬度完全相同。如果你給它100％的寬度，那麼只有你會看到不同。

此外，width財產不會在inline元素上工作，所以將其更改爲block或inline-block。

添加width的標記：

.centerMe { 
    width:100%; 
    display:inline-block; 
} 

更新fiddle這裏。

另一個解決方案是使用任何block元件等div，p或section而不是使用span。

Answer 2

不能使用text-align:上內聯元素的方式。

如果你想達到這個目標，你必須改變你的範圍，即一個<p>元素，這是一個塊。

Answer 3

跨度本身沒有全寬度，所以沒有空間將圖像居中。 您可以通過將span更改爲div來解決此問題。

或者你也可以通過添加display: block的CSS使其行爲像一個div：

.centerMe{ 
    display: block; 
    text-align: center; 
    } 

或者，你可以給它width: 100%，像Hiral建議，但隨後你將不得不採取任何邊界，填充和保證金也應考慮在內。通過使其表現得像塊元素一樣，它會自動佔用可用空間，我認爲這是一個更靈活的解決方案。