Выравнивание поплавка: левый div по центру?

97

Я хочу, чтобы группа изображений отображалась горизонтально по странице. Под каждым изображением есть несколько ссылок, поэтому мне нужно поместить контейнер вокруг каждого изображения / группы ссылок.

Самое близкое, что я получил к тому, что я хочу, - это поместить их в div, которые float: left. Проблема в том, что я хочу, чтобы контейнеры выравнивались по центру, а не слева. Как я могу этого добиться.

Майк
источник

Ответы:

218

использовать display:inline-block;вместо float

вы не можете центрировать поплавки, но встроенные блоки центрируются, как если бы они были текстом, поэтому во внешнем общем контейнере вашей «строки» вы должны установить text-align: center;тогда для каждого контейнера изображения / заголовка (это те, которые будут inline-block;) вы можете повторно -выровняйте текст по левому краю, если вам нужно

Clairesuzy
источник
3
На всякий случай, если кто-то борется с пробелами, которые появляются между элементами, удалите пробелы в своем коде, определив такие элементы, как '<img> </img> <img> </img>' или '<img> < / img> <! - Комментарий -> <img> </img> '.
Maarten
1
Или установите родительский элемент font-size:0и восстановите его на дочернем. Или используйте letter-spacing:-.31emдля родителя и letter-spacing:0для ребенка.
Майк Кузер
@Baumr Вместо этого используйте flexbox. Ниже приведен пример .
Ян Дерк,
3
вам может потребоваться добавить vertical-align:middleпри использовании display:inline-block.
ibsenv
47

CSS Flexbox в наши дни хорошо поддерживается . Перейдите сюда, чтобы получить хорошее руководство по flexbox.

Это отлично работает во всех новых браузерах:

#container {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

.block {
  width:              150px;
  height:             150px;
  background-color:   #cccccc;
  margin:             10px;        
}
<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>    
  <div class="block">4</div>    
  <div class="block">5</div>        
</div>

Некоторые могут спросить, почему бы не использовать display: inline-block? Для простых вещей это нормально, но если у вас есть сложный код внутри блоков, макет может больше не центрироваться правильно. Flexbox более стабилен, чем float left.

Ян Дерк
источник
Это работает для центрирования по горизонтали. Как насчет центрирования по вертикали?
Cullub
Чтобы центрировать по вертикали, задайте высоту контейнера (например, height: 500px;) и добавьте align-items: center;
Ян Дерк,
9

попробуйте это так:

  <div id="divContainer">
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <br class="clear" />
    </div>

    <style type="text/css">
    #divContainer { margin: 0 auto; width: 800px; }
    .divImageHolder { float:left; }
    .clear { clear:both; }
    </style>
Lauw
источник
9

Просто оберните плавающие элементы в a <div>и дайте ему этот CSS:

.wrapper {

display: table;
margin: auto;

}
хорошие пиксели
источник
1

Возможно, это то, что вы ищете - https://www.w3schools.com/css/css3_flexbox.asp

CSS:

#container {
  display:                 flex;
  flex-wrap:               wrap;
  justify-content:         center;
}

.block {
  width:              150px;
  height:             150px;
  margin:             10px;        
}

HTML:

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>          
</div>
Шак
источник
0
.contentWrapper {
    float: left;
    clear: both;
    margin-left: 10%;
    margin-right: 10%;
}

.repeater {
    height: 9em;
    width: 9em;
    float: left;
    margin: 0.2em;
    position: relative;
    text-align: center;
    cursor: pointer;
}
Теоман Шипахи
источник