水平DIV圖像容器

我試圖讓我的圖像水平對齊，但我似乎做錯了什麼，但我不知道問題是什麼。水平DIV圖像容器

這裏的的jsfiddle：http://jsfiddle.net/ByDAA/4/

這裏的CSS：

.imgcontainer img { 
display:inline-block; 
position:relative; 
padding:1px; 
border: 1px solid #c4c4c4; 
margin:0px 37px 0px 0px; 
width:175px; 
height:175px; 
}

來源

2013-10-06 user2680614

你想要容器居中，還是容器內的圖像..？ –

@JoshC是的，我想容器居中，我想圖像是水平對方。 – user2680614

爲什麼你有'
'標籤？ – j08691

你應該包裝每個img和p與div和使用float:left。例如：fiddle

來源

2013-10-06 19:50:33 akinuri

我對你做了一些小的改動，但現在我無法將它調整到中間位置。 http://jsfiddle.net/ByDAA/17/ – user2680614

你能幫我解決嗎？ – user2680614

你想'.imgcontainer'居中？像這樣：[fiddle]（http://jsfiddle.net/ByDAA/18/） – akinuri

你看到換行，因爲你明確地把它們放在那裏<br>元素。

爲了達到預期的效果，把圖像和它們的子文本在一個單獨的容器（div或article）和display:inline-block樣式應用於該元件。

來源

2013-10-06 19:32:10

是的，我早些時候做到了這一點，它的工作原理，但在移動設備上，由於單獨的容器，它無法正確顯示。 – user2680614

嘗試：

float: left;

，改變你的CSS - 刪除unneded性能

來源

2013-10-06 19:33:42 yossico

只要他的HTML與圖像之間稀疏的'br'和'p'元素混淆在一起就無法工作。 –

@NielsKeurentjes我刪除了br和p，現在怎麼辦？ – user2680614

將浮動屬性放在imgContainer CSS塊 – yossico

也許這是你所追求的？ http://jsfiddle.net/taneleero/ByDAA/7/

假設您希望「讓我們出售它」與每張圖片對齊，我在每張圖片+文本週圍添加了容器，並將它們設置爲內嵌塊。對於我分配給text-align：center的容器，內聯塊將與中心對齊。此外，我更改爲圖像做顯示：塊以強制圖像下方的文本。

.container { 
     position: absolute; 
     margin: auto; 
     width: 100%; 
     text-align:center; 
    } 
    .imgcontainer img { 
     display:block; 
     position:relative; 
     padding:1px; 
     border: 1px solid #c4c4c4; 
     width:175px; 
     height:175px; 
    } 
span { 
    display:inline-block; 
    margin:0px 37px 0px 0px; 
}

來源

2013-10-06 19:48:03

您需要將每個圖像和文本元素包裝在特定元素（div或圖）中。

一個數字可能是最好的，因爲它允許使用文本中的figcaption元素。

每個人物設置爲display:inline-block和vertical-align: top和容器設置爲text-align:center

Codepen Example

來源

2013-10-06 19:49:40

水平DIV圖像容器

回答

相關問題