Question

如何将图像容器对齐在中央，图像应该连续并对齐到左边的父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的左侧，div应位于页面的中心。

Answer 1

逻辑上问题是错误的。

因为当你将div对齐到中心时，div会根据自身的宽度和左边的空间来覆盖屏幕，如果图像（多个）在这种情况下对齐左边，那么它将不会覆盖整个div宽度而div会有一些空间向右，它看起来不会中心。

第二种情况，如果所有图像都覆盖整个父div空间，你将如何识别它的左对齐，直到图像不会落入第二行并且最后有一些空白空间。

Answer 2

对于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>

div中的图像左对齐，div显示在中央，具有响应视图

2 个答案: