Centrowanie pływających div w innym div

Przeszukałem inne pytania i chociaż ten problem wydaje się podobny do kilku innych, nic, co widziałem do tej pory, nie wydaje się rozwiązywać problemu, który mam.

Mam div, który zawiera kilka innych div, z których każdy jest wypalony w lewo. Każda z nich zawiera zdjęcie i podpis. Chcę tylko, aby grupa zdjęć była wyśrodkowana wewnątrz zawierającego div.

Jak widać z poniższego kodu, próbowałem użyć zarówno overflow:hidden jak i margin:x auto na rodzicach divów, a Dodałem również clear:both (zgodnie z sugestią w innym temacie) po zdjęciach. Nic nie robi różnicy.

Dziękuję. Doceniam wszelkie sugestie. 
<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>
Author: James A Mohler, 2009-08-13
Source

7 answers

Najpierw usuń atrybut float na wewnętrznej div s. następnie umieść text-align: center na głównej zewnętrznej div. I dla wewnętrznej div s, użycie display: inline-block. Może być również mądre, aby dać im wyraźne szerokości zbyt.

<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
Author: Sampson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-14 18:07:12

Za pomocą Flexbox możesz łatwo wyśrodkować poziomo (i pionowo) pływające dzieci wewnątrz div.

Więc jeśli masz takie proste znaczniki: 

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

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

(jest to (oczekiwany - i niepożądany) wynik )

Teraz dodaj następujące zasady do opakowania: 

display: flex;
justify-content: center; /* align horizontal */
/ Align = "center" bgcolor = "# e0ffe0 " / król Danii / / align = center / ( DEMO)

Tylko dla zabawy, aby uzyskać wyrównanie pionowe, jak również po prostu dodaj: 

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

DEMO

 33
Author: Danield,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-06 07:46:24

Wykonałem powyższe za pomocą względnego pozycjonowania i unoszenia się w prawo.

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

To będzie działać w IE8 i w górę, ale nie wcześniej(niespodzianka, niespodzianka! )

Niestety nie pamiętam źródła tej metody, więc nie mogę przypisać autorowi oryginału. Jeśli ktoś jeszcze wie, proszę o wstawienie linka!

 9
Author: Kendolein,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-13 10:37:29

Poniższe rozwiązanie nie wykorzystuje bloków liniowych. Wymaga jednak dwóch pomocniczych divów:

  1. the content is floated
  2. wewnętrzny pomocnik jest unoszony (rozciąga się tak samo jak zawartość)
  3. wewnętrzny pomocnik jest popychany w prawo o 50% (jego lewy wyrównuje się ze środkiem zewnętrznego pomocnika)
  4. zawartość jest ciągnięta w lewo o 50% (jej środek wyrównuje się z lewą stroną wewnętrznego pomocnika)
  5. zewnętrzny pomocnik jest ustawiony, aby ukryć przepełnienie 

.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
Author: Salman A,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-22 12:49:50

display: inline-block; nie działa w żadnej z przeglądarek IE. Oto, czego użyłem.

// 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
Author: Abdulla Kaleem,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-16 05:33:20

Rozwiązanie: 

<!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
Author: Touhid Rahman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-23 06:19:22

W moim przypadku nie mogłem uzyskać odpowiedzi od @ Sampson, aby pracować dla mnie, w najlepszym razie mam jedną kolumnę wyśrodkowaną na stronie. W tym procesie jednak dowiedziałem się, jak float faktycznie działa i stworzyłem To rozwiązanie. W jego rdzeniu poprawka jest bardzo prosta, ale trudno ją znaleźć w tym wątku, który miał więcej niż 146k wyświetleń w czasie tego postu bez wzmianki.

Wszystko, co jest potrzebne, to suma szerokości przestrzeni ekranu, którą będzie zajmował pożądany układ, a następnie zrobić rodzic o tej samej szerokości i zastosuj margines: auto. To jest to!

Elementy w układzie będą dyktować szerokość i wysokość" zewnętrznego " div. Weź szerokość lub wysokość każdego" myFloat " lub elementu + jego obramowania + jego marginesy i wypełnienia i dodaj je wszystkie razem. Następnie dodaj pozostałe elementy razem w ten sam sposób. To da ci szerokość rodzica. Wszystkie mogą być nieco różne rozmiary i można to zrobić z mniejszą lub większą liczbą elementów.

Ex.(każdy element ma 2 boki więc obramowanie, margines i padding są mnożone x2)

Więc element, który ma szerokość 10px, border 2px, margin 6PX, padding 3px wyglądałby tak: 10 + 4 + 12 + 6 = 32

Następnie dodaj wszystkie całkowite szerokości twojego elementu.

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

W tym przykładzie szerokość" zewnętrznego " div będzie wynosić 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
Author: dimmech,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-23 04:32:44