Центрування плаваючих дівів у межах іншого діва

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

У мене є 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>

Спочатку видаліть floatатрибут на внутрішній divs. Потім надіньте 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>

За допомогою Flexbox ви можете легко горизонтально (і вертикально) центрально плавати дітьми всередині діва.

Отже, якщо у вас є проста розмітка на зразок:

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

і діти, що плавають, отримують вирівняний центр ( DEMO) )

Просто для задоволення, щоб отримати вертикальне вирівнювання, просто додайте:

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

DEMO

Я здійснив вищезазначене, використовуючи відносне позиціонування та плаваючи праворуч.

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 і вище, але не раніше (сюрприз, сюрприз!)

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

Наступне рішення не використовує вбудовані блоки. Однак для цього потрібні два допоміжні діви:

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>

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

Рішення:

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

У моєму випадку я не зміг отримати відповідь від @Sampson, щоб він працював на мене, в кращому випадку я отримав єдину колонку, зосереджену на сторінці. Однак у цьому процесі я дізнався, як поплавок працює насправді, і створив це рішення. За своєю суттю виправлення дуже просте, але важко знайти, як видно з цього потоку, який на момент публікації цього посту мав понад 146 тис. Переглядів без згадки.

Все, що потрібно, - це загальна кількість ширини простору екрана, яку буде займати потрібний макет, а потім зробити батьківську ширину такою ж шириною і застосувати поле: авто. Це воно!

Елементи в макеті диктуватимуть ширину та висоту «зовнішнього» поділу. Візьміть кожну ширину або висоту елемента "myFloat" або елемента + його межі + його поля та підкладки та додайте їх разом. Потім додайте інші елементи разом таким же чином. Це дасть вам ширину батьків. Всі вони можуть бути дещо різного розміру, і ви можете зробити це з меншою чи більшою кількістю елементів.

Напр. (Кожен елемент має 2 сторони, тому рамка, поле та прокладка множать x2)

Отже елемент, що має ширину 10 пікселів, межа 2px, поле 6px, padp 3px виглядатиме так: 10 + 4 + 12 + 6 = 32

Потім додайте всі загальні ширини вашого елемента разом.

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

У цьому прикладі ширина для "зовнішнього" поділу становитиме 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>