Вирівнювання поплавка: лівий div до центру?

96

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

Найближче, до чого я хотів, - це розміщення їх у divs, які плавають: left. Проблема в тому, що я хочу, щоб контейнери вирівнювались по центру, не вліво. Як я можу цього досягти.

html css

— Майк
джерело

216

використовувати display:inline-block;замість float

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

— clairesuzy
джерело

3

Про всяк випадок, якщо хтось бореться з пробілами, що з’являються між елементами, видаліть пробіли у коді, визначивши такі елементи, як „<img> </img> <img> </img>” або “<img> < / img> <! - Коментар -> <img> </img> '.

— Маартен

1

Або встановіть батьківський елемент font-size:0і відновіть його для дочірнього елемента . Або використовувати letter-spacing:-.31emна батьків і letter-spacing:0на дитину.

— Майк Коузер

@Baumr Замість цього використовуйте flexbox. Є приклад нижче .

— Ян Дерк,

3

вам може знадобитися додати vertical-align:middleпід час використання display:inline-block.

— ібсенв

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 стабільніший, ніж плаваючий лівий.

— Ян Дерк
джерело

Це працює для горизонтального центрування. Як щодо центрування також вертикально?

— Куллуб,

Для центрування по вертикалі надайте контейнеру висоту (наприклад, висота: 500 пікселів;) та додайте елементи вирівнювання: 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

Просто оберніть плаваючі елементи в <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;
}

— Теоман шипахі
джерело