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

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

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

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

В то время как я хотел бы, чтобы поплавковые divs были сосредоточены в контейнере следующим образом:

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

Спасибо,

DLiKS

Ответы

Ответ 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 был выровнен со страницей.

Ответ 2

Рассчитайте общее количество ширины пространства экрана, которое займет требуемый макет, затем сделайте родительскую ширину равной и примените margin: 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>

Ответ 3

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

Ответ 4

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

ИЛИ

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