HTML - CSS - 如何在居中和可调整大小的父级中左对齐图像答案

【问题标题】：HTML - CSS - How to left-align images in a centered and resizable parentHTML - CSS - 如何在居中和可调整大小的父级中左对齐图像
【发布时间】：2015-05-17 07:10:06
【问题描述】：

我的页面中有很多缩略图：我希望它们居中，但最后一行在调整大小时看起来很糟糕，而且我在页面中心浮动了一两个孤立图像。

最后一行应该左对齐。怎么做？我试图用“margin:0 auto 0 auto;”插入另一个div但它不起作用。

https://jsfiddle.net/4hw4fkm9/

我想拥有的东西：

<div style="text-align:center;">
    <img />
    <img />
    <img />
    <img />
    etc..
</div>

【问题讨论】：

“最后一行应该是左对齐的。”你的意思是根据你的代码应该是，还是你只是希望它是？
我只是在谈论结果，而不是字面意思
@GCW 我敢打赌你的图片尺寸不同。
@GCW 你能再发一张你想要的图片吗？
我刚做了，看问题

标签： javascript html css alignment

【解决方案1】：

您应该为此使用 CSS，而不是 HTML 属性“align”，这是非常老派的。您可以将图像向左浮动，在这种情况下它们将堆叠到左侧，或者您可以将所有图像设置为显示：inline-block，然后在其容器元素（本例中为 div）上使用 text-align: center .

以下是一些参考资料： http://www.w3schools.com/css/css_float.asp http://www.w3schools.com/cssref/pr_class_display.asp

【讨论】：

我只希望最后的图像与我的主块的左边距对齐。看看小提琴。
对，所以如果你使用浮动解决方案，它们将是：jsfiddle.net/4tofousc/2Blurgh，错误的链接。固定。
这不是我想要的。我需要在左右两边有相同的边距，也需要调整大小，最后的图像对齐到左边而不是中心。
是的，你需要 jswebb 的答案中的边界容器。

【解决方案2】：

我不确定这是否是您要查找的内容 - 正如您提到的那样，你们都“希望它们居中”但也希望它们左对齐。

你可以做的是创建另一个div作为容器，在主div上设置width: 100%，在容器div上设置稍低的宽度，在容器上设置margin: 0 auto;。然后用left:0;使图片相对定位。

See Updated Fiddle Here。这就是你所追求的吗？

编辑： Re-Updated Fiddle 我附加的评论。您可以在主容器div 上使用设置像素值来说明缩略图的设置像素宽度 + 出现的任何间距。

【讨论】：

容器不在页面中心。我用图片更新了问题
容器在页面居中；然而，问题是缩略图有一个固定的像素宽度，而其余的是百分比 - 所以，如果你到达一行上剩余的空间小于 100px 的点，它看起来不会居中，因为缩略图可以'不适合。一个解决方案是找出每个缩略图的确切像素构成，然后让主 div 和容器 div 也设置像素值 - 具有允许缩略图宽度 + 任何填充等的测量值均匀地进入它。 jsfiddle.net/4hw4fkm9/5 - 小提琴更新。这个呢？
我不能使用这个解决方案，我正在研究引导流体网格

【解决方案3】：

使用小提琴中的选择器。

.center {
    text-align:center;
    background-color:red;
    margin:0 auto;
    padding:0 20px;
}

.center:after{
    content:'';
    display:table;
    clear:both;
}

img {
    width: 100px;
    height: 100px;
    float:left;
}

从那里开始，.center 元素需要宽度为 100px 的倍数才能包含固定数量的 img。我添加了填充以使其看起来更接近您提供的图片。

【讨论】：