HTML-CSS - Как выровнять по левому краю изображения в центрированном и изменяемом по размеру родительском

Question

У меня есть много эскизов на моей странице: я хочу, чтобы они были центрированы, но последняя строка выглядит ужасно при изменении размера, и у меня есть что-то вроде одного или два сиротных изображения, плавающих в центре страницы.

Последняя строка должна быть выровнена по левому краю. Как это сделать? Я попытался вставить еще один div с «margin: 0 auto 0 auto;» но это не сработает.

https://jsfiddle.net/4hw4fkm9/

То, что я пытаюсь иметь:

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

Answer 1

Вы должны использовать CSS для этого, а не атрибут HTML "выравнивать", который является довольно старой школы. Вы можете либо поплавать изображениями слева, и в этом случае они будут складываться влево, либо вы можете установить все изображения для отображения: встроенный блок, а затем использовать text-align: center на свой элемент контейнера (в этом случае div) ,

Вот некоторые ссылки: http://www.w3schools.com/css/css_float.asp http://www.w3schools.com/cssref/pr_class_display.asp

Answer 2

Я не уверен, если это то, что вы ищете, - как вы говорите, что вы оба хотите, чтобы они «по центру», но хотите их по левому краю, слишком.

Что вы можете сделать, это создать еще один div, который будет выступать в качестве контейнера, установите width: 100% на главной DIV установите ширину немного ниже на контейнере DIV и установить margin: 0 auto; на контейнере. Затем сделайте изображения относительно позиционированными с left:0;.

See Updated Fiddle Here. Это то, что вам нужно?

EDIT:Re-Updated Fiddle для моего приложенного комментария. Вы можете использовать заданные значения пикселей на главном и контейнере div, чтобы учесть заданную ширину пикселя эскизов + любое расстояние, которое происходит.

Answer 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, чтобы включать в себя фиксированное количество ГИМ. Я добавил дополнение, чтобы он выглядел ближе к изображению, которое вы предоставили.