Как центрировать плавающие элементы в контейнере

Question

Можно ли центрировать плавающие div в контейнере, и если да, то как?

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

----------------------------
-                          -
- +++  +++++  ++++  ++     -
- +++  +++++  ++++  ++     -
-                          -
- ++   ++++++  +++  +      -
- ++   ++++++  +++  +      -
-                          -
----------------------------

В то время как я хотел бы, чтобы плавающие div центрировались в контейнере так:

----------------------------
-                          -
-   +++  +++++  ++++  ++   -
-   +++  +++++  ++++  ++   -
-                          -
-   ++   ++++++  +++  +    -
-   ++   ++++++  +++  +    -
-                          -
----------------------------

Спасибо

DLiKS

Answer 1

Это возможно. Использование http://www.pmob.co.uk/pob/centred-float.htm и http://css -discuss.incutio.com / wiki / Centering_Block_Element в качестве источника.

Вот скрипка, демонстрирующая концепцию с использованием HTML и CSS снизу: https://jsfiddle.net/t9qw8m5x/

<div id="outer">
    <ul id="inner">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2 with long text</a></li>
        <li><a href="#">Button 3</a></li>
    </ul>
</div>

Это минимальный CSS, необходимый для эффекта:

#outer {
    float: right;
    position: relative;
    left: -50%;
}

#inner {
    position: relative;
    left: 50%; 
}

#inner > li {
    float: left;
}

Пояснение:

Начните с правила li { float: left; }. Затем оберните эти поплавки в left: 50%; relative position, чтобы левый край поля <ul> находился в горизонтальном центре страницы, затем используйте правила в #outer, чтобы правильно настроить его так, чтобы центр #inner выравнивается по странице.

Answer 2

С помощью CSS3 вы также можете добиться этого с помощью flexbox:

HTML:

<ul id="flexcontainer">
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2 with long text</a></li>
     <li><a href="#">Item 3</a></li>
</ul>

Мин. CSS:

#flex-container {
    display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

#flex-container > li {
    float: left;
}

Fiddle (с некоторыми стилями для визуализации): https://jsfiddle.net/k5o37dff/4/

Подробнее о flexbox: https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Поддержка браузера: https://www.w3schools.com/cssref/css3_pr_flex.asp

Answer 3

Рассчитайте общий размер ширины экранного пространства, который займет требуемый макет, затем установите для родительского элемента ту же ширину и примените поле: auto.

.outer {
  /* floats + margins + borders = 270 */
  max-width: 270px;
  margin: auto;
  height: 80px;
  border: 1px;
  border-style: solid;
}

.myFloat {
    /* 3 floats x 50px = 150px */
    width: 50px;
    /* 6 margins x 10px = 60px */
    margin: 10px;
    /* 6 borders x 10px = 60px */
    border: 10px solid #6B6B6B;
    float: left;
    text-align: center;
    height: 40px;
}

<div class="outer">
  <div class="myFloat">Float 1</div>
  <div class="myFloat">Float 2</div>
  <div class="myFloat">Float 3</div>
</div>

Answer 4

<div id='contain'><center><div id='content'>qwerty</div></center></div>

OR

<div id='contain'><div id='content'>qwerty</div></div>

<style type='text/css'>

#content   {

  width:200px;

  height:200px;

  margin:auto;
  /* margin:auto; requires width and i think height to be defined in nearly all browsers */

  }</style>

Answer 5

Хорошая уловка для центрирования элемента "div" - установить "margin: auto", он будет центрировать их.