div中的圖像對齊左側，div顯示中央，響應式視圖

-1

如何對齊圖像容器的中心和圖像，應該連續並對齊左側的父級div。div中的圖像對齊左側，div顯示中央，響應式視圖

.imgDiv{ 
 
text-align:center; 
 
} 
 
.imgDiv img{ 
 
text-align:left; 
 
width:100px; 
 
}

<div class="imgDiv"> 
 
<img src="img1"> 
 
<img src="img2"> 
 
<img src="img3"> 
 
<img src="img4"> 
 
<img src="img5"> 
 
<img src="img6"> 
 
<img src="img7"> 
 
<img src="img8"> 
 
<img src="img9"> 
 
<img src="img10"> 
 

 
</div>

在我的代碼圖像中心的div對齊

，但圖像應該是該分區的左邊，DIV應該在頁面中心。

來源

2017-10-11 Vijju Sena

邏輯上的問題是錯誤的。

因爲當你將div對齊到中心時，div會根據自身寬度和左側空間覆蓋屏幕，如果圖像（多個）在這種情況下與左側對齊，反抗它不會覆蓋整個div寬度，div有一些空間到右邊，它不會看中心。

第二種情況是，如果所有圖像都覆蓋了整個父div空間，那麼您將如何識別其左對齊，直到圖像不會落入第二行並在最後有一些空白空間。

來源

2017-10-11 10:36:37

右@himanshu。我明白你在說什麼。但不能將中心的圖像與響應性對齊？ –

這codepen示例將幫助你。 https://codepen.io/greatzspido/pen/ZXRJZW。 –

謝謝。它工作正常 –

對於div應該是中心給max-width如你所願和margin:0 auto;。

.imgDiv{ 
 
    margin:0 auto; 
 
    max-width:95%; 
 
} 
 
.imgDiv img{ 
 
    width:100px; 
 
}

<div class="imgDiv"> 
 
<img src="img1"> 
 
<img src="img2"> 
 
<img src="img3"> 
 
<img src="img4"> 
 
<img src="img5"> 
 
<img src="img6"> 
 
<img src="img7"> 
 
<img src="img8"> 
 
<img src="img9"> 
 
<img src="img10"> 
 
</div>

來源

2017-10-11 10:13:51

div未在代碼中居中對齊，右側佔用更多空間。 –

@ankita在響應圖像中未對齊到中心。 div只對齊中心。 –

@VijjuSena你沒有提到，你想在響應的看法。 –

div中的圖像對齊左側，div顯示中央，響應式視圖

回答

相關問題