Проблема CSS / XHTML с горизонтально и вертикально центрированным и плавающим div - PullRequest
Новая
       49

Проблема CSS / XHTML с горизонтально и вертикально центрированным и плавающим div

0 голосов
/ 29 июля 2011

У меня проблема с плавающими div. Вот мой сайт: http://www.wokarts.com/index.php?option=com_gallery&controller=images&parent=6

Не знаю, почему в некоторых строках 4 изображения, а в других только одно.

Вот код, ответственный за это: 

#gallery-images {margin:0 0 50px 0; display: table}
div.image-item {
    float:left; display: table; text-align: center; position: relative;
    width:180px; height: 150px;
    margin:10px 0 30px 40px;
    vertical-align: middle; text-align: center;
}

div.image-item a {display: table-cell; vertical-align: middle;}
div.image-item img {margin:auto; border:1px solid #d3d4d4;}


#gallery-image {margin:0 0 30px 0 auto; text-align: center; display: block; width:970px; padding-bottom: 80px;}
div.photo-item  {margin: 0 auto; width:850px; display: block; text-align: center;}
div.photo-item a.img {margin:0 auto;  text-align: center; }

Ответы [ 3 ]

0 голосов
/ 29 июля 2011

Измените отображение на div.image-item на inline-block, и я бы изменил, чтобы центр изображения находился внутри этого деления.

0 голосов
/ 29 июля 2011

Когда вы оставляете плавающие элементы такими, как только они перестают помещаться на одной строке, следующий плавающий элемент будет опускаться только настолько, насколько это необходимо, до тех пор, пока он не уместится.

5-е изображение,например, «застревает» в нижней части вашего 3-го изображения вместо того, чтобы полностью перемещаться назад к левому краю, потому что 4-е изображение не такое высокое.

Для 10-го изображения этого не происходитПоскольку 9-е изображение выше, чем все остальные изображения, оставшиеся от него, поэтому, как только 10-е изображение опустится ниже края 9-го изображения, оно очищает весь ряд.

Вы увидите, чтоЯ имею в виду более четко, если вы замените поле отступом и добавите границу к .image-item.

. Чтобы заставить первый элемент каждой строки перейти к началу следующей строки, вы не должны использовать float,оберните каждую строку из 4 предметов в содержащем div или используйте магические силы CSS3, чтобы очистить плавающие элементы в начале каждой строки: 

.image-item:nth-child(4n+1) { clear:left }
0 голосов
/ 29 июля 2011

Попробуйте display:inline-block;. 

div.image-item { display: -moz-inline-block; display:inline-block; zoom:1; *display:inline; vertical-align:top; width:180px; margin:10px 0 30px 40px; vertical-align: middle; text-align: center; }
...