HTML - CSS - How to left-align images in a centered and resizable parent

I have a lot of thumbnails in my page: I want them to be centered, but the last line looks awful while resizing and I have something like one or two orphan images floating in the center of the page.

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

The last line should be left-aligned. How to do it? I tried to insert another div with "margin:0 auto 0 auto;" but it doesn't work.

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

https://jsfiddle.net/4hw4fkm9/

What I try to have: HTML - CSS - How to left-align images in a centered and resizable parent

我想要的是:

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

3 个解决方案

#1

You should use CSS for this, not the HTML attribute "align", which is pretty old school. You can either float the images left, in which case they will stack to the left, or you could set all the images to display: inline-block, then use text-align: center on their container element (the div in this case).

您应该使用CSS,而不是HTML属性“align”,这是相当古老的学校。您可以向左浮动图像,在这种情况下它们将堆叠到左侧,或者您可以设置要显示的所有图像:inline-block,然后在其容器元素上使用text-align:center(在这种情况下为div) 。

Here are some references: http://www.w3schools.com/css/css_float.asp http://www.w3schools.com/cssref/pr_class_display.asp

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

#2

I'm not sure if this is what you're looking for - as you mention that you both 'want them centered' but want them left-aligned, too.

我不确定这是否是你正在寻找的东西 - 正如你提到的那样,你们两个都“希望它们居中”,但也希望它们是左对齐的。

What you can do is create another div that will act as a container, set width: 100% on the main div, set the width slightly lower on the container div and set margin: 0 auto; on the container. Then make the images relatively positioned with left:0;.

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

See Updated Fiddle Here. Is this what you're after?

请参阅更新的小提琴。这就是你要追求的吗?

EDIT: Re-Updated Fiddle for my attached comment. You can use set pixel values on the main and container div to account for the set pixel width of the thumbnails + any spacing that occurs.

编辑:重新更新小提琴我的附加评论。您可以在main和容器div上使用设置像素值来考虑缩略图的设置像素宽度+发生的任何间距。

#3

Using the selectors in the fiddle.

使用小提琴中的选择器。

.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;
}

From there the .center element would need a width of some multiple of 100px to include a fixed number of imgs. I added padding to make it look closer to the picture you provided.

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

#1