Центрирование плавающих дивов в другом div

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

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

как вы можете видеть из кода ниже, я пробовал использовать оба overflow:hidden и margin:x auto на родительские дивы, и я также добавил clear:both (как было предложено в другой теме) После фото. Кажется, ничто не имеет значения.

спасибо. Я ценю любые предложения.

<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
    <h4>Section Header</h4>

    <div style="margin: 2em auto;">

        <div style="float: left; margin: auto 1.5em;">
            <img src="photo1.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo2.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo3.jpg" /><br />
             Photo Caption
        </div>

        <div style="clear: both; height: 0; overflow: hidden;"> </div>

    </div>

</div>
7 133
html css centering

7 ответов:

во-первых, удалить float атрибут на внутреннем divы. Затем поставить text-align: center на главном внешнем div. И для внутреннего divs, используйте display: inline-block. Может быть также разумно дать им явные ширины тоже.

<div style="margin: auto 1.5em; display: inline-block;">
  <img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
  <br/>
  Nadia Bjorlin
</div>
250

С Flexbox вы можете легко горизонтально (и вертикально) центр сплавляли детей внутри div.

так что если у вас есть простая разметка, как так:

<div class="wpr">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

С CSS:

.wpr
{
    width: 400px;
    height: 100px;
    background: pink;
    padding: 10px 30px;
}

.wpr span
{
    width: 50px;
    height: 50px;
    background: green;
    float: left; /* **children floated left** */
    margin: 0 5px;
}

(это (ожидаемый-и нежелательный)результат)

теперь добавьте в обертку следующие правила:

display: flex;
justify-content: center; /* align horizontal */

и плавали дети получают выровненный центр (демо)

просто ради удовольствия, чтобы получить вертикальное выравнивание, а также просто добавить:

align-items: center; /* align vertical */

демо

33

Я выполнил вышеизложенное, используя относительное позиционирование и плавая вправо.

HTML-код:

<div class="clearfix">                          
    <div class="outer-div">
        <div class="inner-div">
            <div class="floating-div">Float 1</div>
            <div class="floating-div">Float 2</div>
            <div class="floating-div">Float 3</div>
        </div>
    </div>
</div>

CSS:

.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }

.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JSFiddle: http://jsfiddle.net/MJ9yp/

это будет работать в IE8 и выше, но не ранее (Сюрприз, сюрприз!)

Я не помню источник этот метод, к сожалению, поэтому я не могу отдать должное автору. Если кто-то еще знает, пожалуйста, разместите ссылку!

9

в следующем решении не используются встроенные блоки. Однако для этого требуется два вспомогательных дива:

  1. содержание плавает
  2. внутренний помощник плавает (он растягивается так же, как и содержимое)
  3. внутренний помощник толкается вправо на 50% (его левый выравнивается с центром внешнего помощника)
  4. содержимое вытягивается влево на 50% (его центр выравнивается слева от внутреннего помощника)
  5. внешний помощник настроен на скрытие переполнение

.ca-outer {
  overflow: hidden;
  background: #FFC;
}
.ca-inner {
  float: left;
  position: relative;
  left: 50%;
  background: #FDD;
}
.content {
  float: left;
  position: relative;
  left: -50%;
  background: #080;
}
/* examples */
div.content > div {
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
  background: #FFF;
}
ul.content {
  padding: 0;
  list-style-type: none;
}
ul.content > li {
  margin: 10px;
  background: #FFF;
}
<div class="ca-outer">
  <div class="ca-inner">
    <div class="content">
      <div>Box 1</div>
      <div>Box 2</div>
      <div>Box 3</div>
    </div>
  </div>
</div>
<hr>
<div class="ca-outer">
  <div class="ca-inner">
    <ul class="content">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>
      <li>Suspendisse iaculis risus ut dapibus cursus.</li>
    </ul>
  </div>
</div>
5

display: inline-block; не будет работать ни в одном из браузеров IE. Вот что я использовал.

// change the width of #boxContainer to 
// 1-2 pixels higher than total width of the boxes inside:

#boxContainer {         
    width: 800px; 
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#Box{
    width: 240px; 
    height: 90px;
    background-color: #FFF;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}
4

устранение:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Knowledge is Power</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            #outer {
                text-align:center;
                width:100%;
                height:200px;
                background:red;
            }
            #inner {
                display:inline-block;
                height:200px;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">Hello, I am Touhid Rahman. The man in Light</div>
        </div>
    </body>
</html>
2

в моем случае я не мог получить ответ от @Sampson, чтобы работать на меня, в лучшем случае я получил один столбец с центром на странице. В процессе, однако, я узнал, как поплавок на самом деле работает и создал это решение. В его основе исправление очень простое, но его трудно найти, как видно из этой темы, которая имела более 146 тысяч просмотров во время этого сообщения без упоминания.

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

элементы в макете будут диктовать ширину и высоту "внешнего" div. Возьмите каждый" myFloat " или ширину или высоту элемента + его границы + его поля и его отступы и добавьте их все вместе. Затем добавьте другие элементы вместе таким же образом. Это даст вам родительскую ширину. Все они могут быть несколько разных размеров и вы можете сделать это с меньшим или большим количеством элементов.

Ex.(каждый элемент имеет 2 стороны, так что границы, поля и отступы умножаются x2)

таким образом, элемент, который имеет ширину 10px, границы 2px, поля 6px, заполнение 3px будет выглядеть так: 10 + 4 + 12 + 6 = 32

затем добавьте все суммарные ширины вашего элемента вместе.

Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24

в этом примере ширина для" внешнего " div будет 112.

.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 = 60 */
    margin: 10px;
    /* 6 borders x 10px = 60 */
    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>
1