Schwimmende Divs in einem anderen Div zentrieren

Ich habe nach anderen Fragen gesucht, und obwohl dieses Problem einigen anderen ähnlich zu sein scheint, scheint nichts, was ich bisher gesehen habe, das Problem zu lösen, das ich habe.

Ich habe ein Div, das eine Reihe anderer Divs enthält, von denen jedes nach links schwebt. Diese Divs enthalten jeweils ein Foto und eine Bildunterschrift. Ich möchte nur, dass die Gruppe von Fotos innerhalb des enthaltenen div zentriert wird.

Wie Sie dem folgenden Code entnehmen können, habe ich versucht, beide overflow:hiddenund margin:x autodie übergeordneten Divs zu verwenden, und ich habe clear:bothnach den Fotos auch ein (wie in einem anderen Thema vorgeschlagen) hinzugefügt . Nichts scheint einen Unterschied zu machen.

Danke dir. Ich freue mich über Vorschläge.

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

Entfernen Sie zuerst das floatAttribut auf dem inneren divs. Dann setzen Sie text-align: centerdie Hauptaußenseite auf div. Und für die inneren divs verwenden display: inline-block. Könnte auch klug sein, ihnen auch explizite Breiten zu geben.

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

Mit Flexbox können Sie schwebende Kinder einfach horizontal (und vertikal) in einem Div zentrieren.

Wenn Sie also ein einfaches Markup haben:

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

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

(Dies ist das (erwartete - und unerwünschte) ERGEBNIS )

Fügen Sie nun dem Wrapper die folgenden Regeln hinzu:

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

und die schwebenden Kinder werden in der Mitte ausgerichtet ( DEMO )

Nur zum Spaß, um auch eine vertikale Ausrichtung zu erhalten, fügen Sie einfach Folgendes hinzu:

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

DEMO

Ich habe das oben genannte durch relative Positionierung und Schweben nach rechts erreicht.

HTML Quelltext:

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

Dies funktioniert in IE8 und höher, aber nicht früher (Überraschung, Überraschung!)

Ich erinnere mich leider nicht an die Quelle dieser Methode, daher kann ich dem ursprünglichen Autor keine Anerkennung geben. Wenn jemand anderes weiß, bitte den Link posten!

Die folgende Lösung verwendet keine Inline-Blöcke. Es sind jedoch zwei Helfer-Divs erforderlich:

1. Der Inhalt ist schwebend
2. Der innere Helfer ist schwebend (er erstreckt sich so weit wie der Inhalt)
3. Der innere Helfer wird um 50% nach rechts gedrückt (sein linker richtet sich nach der Mitte des äußeren Helfers aus)
4. Der Inhalt wird zu 50% nach links gezogen (seine Mitte stimmt mit der linken Seite des inneren Helfers überein)
5. Der äußere Helfer ist so eingestellt, dass der Überlauf ausgeblendet wird

.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;funktioniert in keinem IE-Browser. Hier ist was ich benutzt habe.

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

Lösung:

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

In meinem Fall konnte ich die Antwort von @Sampson nicht für mich arbeiten lassen, bestenfalls bekam ich eine einzelne Spalte auf der Seite zentriert. Dabei habe ich jedoch gelernt, wie der Float tatsächlich funktioniert, und diese Lösung erstellt. Im Kern ist das Update sehr einfach, aber schwer zu finden, wie dieser Thread zeigt, der zum Zeitpunkt dieses Beitrags mehr als 146.000 Aufrufe hatte, ohne es zu erwähnen.

Alles, was benötigt wird, ist die Summe der Bildschirmbreite, die das gewünschte Layout einnehmen wird, dann das übergeordnete Element auf die gleiche Breite zu bringen und den Rand anzuwenden: auto. Das ist es!

Die Elemente im Layout bestimmen die Breite und Höhe des "äußeren" Div. Nehmen Sie die Breite oder Höhe jedes "myFloat" oder Elements + seine Ränder + seine Ränder und seine Polster und addieren Sie sie alle. Fügen Sie dann die anderen Elemente auf die gleiche Weise zusammen. Dadurch erhalten Sie die übergeordnete Breite. Sie können alle etwas unterschiedliche Größen haben und Sie können dies mit weniger oder mehr Elementen tun.

Bsp. (Jedes Element hat 2 Seiten, sodass Rand, Rand und Polsterung x2 multipliziert werden.)

Ein Element mit einer Breite von 10 Pixel, einem Rand von 2 Pixel, einem Rand von 6 Pixel und einem Abstand von 3 Pixel würde also folgendermaßen aussehen: 10 + 4 + 12 + 6 = 32

Addieren Sie dann alle Gesamtbreiten Ihres Elements.

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

In diesem Beispiel wäre die Breite für das "äußere" 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>