Центр поплавков горизонтально - PullRequest
Новая
       31

Центр поплавков горизонтально

3 голосов
/ 05 декабря 2009

Я хочу отобразить плавающие окна (элементы, содержащие миниатюры), а количество миниатюр зависит от ширины текущей страницы. Например: 

<div class="container">
  <div class="box1" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box2" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box3" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box4" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
    .......... ETC
</div>

проблема в том, что для заданной ширины он показывает, например, 4 поля в каждой строке, но все они выровнены по левому краю и есть пробел справа, как я могу центрировать по горизонтали для каждой строки ??

Примерно так: http://realworldstyle.com/thumbs_3.html но с прямоугольниками по центру на странице ...

спасибо заранее,

Ответы [ 5 ]

7 голосов
/ 05 декабря 2009

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

Но это даст вам дополнительные проблемы с вертикальными полями и высотой установки. Но, насколько я знаю, это единственный надежный кросс-браузерный способ, пока inline-block не поддерживается широко.

3 голосов
/ 05 декабря 2009

Извините, но вы не сможете делать то, что вам нужно, с простым CSS + HTML. (Посмотрите на @Pekka для альтернативы, хотя, если ряд миниатюр не заполняет всю строку, они будут центрированы сами по себе в последней строке)

Вам необходимо иметь фиксированную ширину родительского объекта .container с margin-left: auto и margin-right:auto, чего вы не можете сделать, поскольку это страница ширины жидкости.

Вот как я бы это сделал, хотя наверняка есть ошибки, которые вам нужно будет обойти:

  1. Привязать событие javascript к событию window.resize
  2. Получите ширину нового документа и посмотрите, сколько миниатюр поместится в одной строке
  3. Установите ширину div.container равной этой ширине плюс небольшая часть поля справа. Это div всегда будет иметь margin-left и margin-right из auto

Это позволит отцентрировать миниатюры как можно лучше. В зависимости от вашего визуального отображения вам может потребоваться дополнительный div-элемент для переноса фона 100% width.

2 голосов
/ 05 декабря 2009

Использовать неупорядоченный список со встроенными элементами списка:

HTML: 

<ul>
    <li><img src="image1.jpg" /></li>
    <li><img src="image2.jpg" /></li>
    <li><img src="image3.jpg" /></li>
    <li><img src="image4.jpg" /></li>
</ul>

CSS: 

ul {
    width: 960px;
    text-align: center;
}

ul li {
    display: inline;
}

Это будет происходить до тех пор, пока внутри элементов LI не будет элементов уровня блока. Работает также, если у вас есть несколько строк изображений;) Вы также можете использовать div, но использование списка семантически намного приятнее.

1 голос
/ 05 декабря 2009

встроенный блок и автоматические поля в .container должны помочь большинству браузеров, возможно, с выравниванием текста: по центру тела.

И если IE6 и IE7 не играют хорошо, вы всегда можете использовать javascript / jquery, чтобы обернуть все это в таблицу только для них.

Имейте в виду, я бы не посмел предложить настольное решение для обычных браузеров, хотя, очевидно, оно работает без нареканий; -)

0 голосов
/ 14 ноября 2013

Стиль поля: 0 авто; будет центрировать элемент. Но вам нужно указать ширину родительского контейнера. 

<div style="width:100%; float:left; margin: 0 auto;">
   /* Your Child Elements */
</div>
...