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

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

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

6 80
html css

6 ответов:

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

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

186

мы сейчас живем в 2018 году и CSS Flexbox хорошо поддерживается. иди сюда для хорошего урока по flexbox.

это прекрасно работает во всех новых браузерах:

#container {
  display:                 flex;
  display:                 -webkit-flex; /* Safari 8 */
  flex-wrap:               wrap;
  -webkit-flex-wrap:       wrap;         /* Safari 8 */
  justify-content:         center;
  -webkit-justify-content: center;       /* Safari 8 */
}

.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 более стабилен, чем поплавок слева.

34

попробуй вот так:

  <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>
9

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

.wrapper {

display: table;
margin: auto;

}
8

возможно, это то, что вы ищете - 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>
1
.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;
}
0