webentwicklung-frage-antwort-db.com.de

Zentrieren von schwebenden Divs in einem anderen Div

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 anzugehen, das ich habe.

Ich habe eine Div, die eine Reihe von anderen Divs enthält, von denen jede nach links geschwommen ist. Diese Divs enthalten jeweils ein Foto und eine Beschriftung. Alles, was ich möchte, ist, dass die Gruppe von Fotos innerhalb des enthaltenen Div zentriert wird.

Wie Sie dem folgenden Code entnehmen können, habe ich versucht, sowohl overflow:hidden Als auch margin:x auto Für die übergeordneten Divs zu verwenden, und ich habe auch einen clear:both Hinzugefügt (wie in empfohlen) ein anderes thema) nach den fotos. Nichts scheint einen Unterschied zu machen.

Vielen Dank. 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>
htmlcentercss
139
Darren

Entfernen Sie zunächst das float -Attribut für das innere divs. Dann setzen Sie text-align: center am Hauptaußen div. Und für die inneren divs verwenden Sie display: inline-block . Könnte auch klug sein, ihnen 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>
261
Sampson

Mit Flexbox können Sie leicht horizontal (und vertikal) zentrieren schwebende Kinder innerhalb eines div.

Wenn Sie also ein einfaches Markup haben, wie folgt:

<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 dem Wrapper nun die folgenden Regeln hinzu:

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

und die schwimmenden Kinder werden zentriert ( DEMO )

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

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

DEMO

33
Danield

Ich habe das oben Gesagte 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 wird in IE8 und höher funktionieren, aber nicht früher (Überraschung, Überraschung!)

Da ich mich leider nicht an die Quelle dieser Methode erinnere, kann ich dem ursprünglichen Autor keine Ehre machen. Wenn jemand anderes weiß, poste bitte den Link!

10
Kendolein

In der folgenden Lösung werden keine Inline-Blöcke verwendet. Es werden jedoch zwei Hilfsdivs benötigt:

  1. Der Inhalt ist schwebend
  2. Der innere Helfer ist schwebend (er dehnt sich so weit aus wie der Inhalt)
  3. Der innere Helfer wird um 50% nach rechts gedrückt (der linke Helfer richtet sich nach der Mitte des äußeren Helfers).
  4. Der Inhalt wird zu 50% nach links gezogen (seine Mitte richtet sich nach der linken Seite des inneren Hilfsmittels)
  5. Der äußere Helfer ist so eingestellt, dass er den Überlauf verbirgt
.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
Salman A

display: inline-block; funktioniert in keinem der IE Browser. Hier ist, was ich verwendet 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;
}
4
Abdulla Kaleem

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>
2
Touhid Rahman

In meinem Fall konnte ich die Antwort von @Sampson nicht erhalten, um für mich zu arbeiten, bestenfalls bekam ich eine einzelne Spalte, die auf der Seite zentriert war. Dabei habe ich jedoch gelernt, wie der Schwimmer tatsächlich funktioniert, und diese Lösung erstellt. Im Kern ist das Update sehr einfach, aber schwer zu finden, wie aus diesem Thread hervorgeht, der zum Zeitpunkt dieses Beitrags mehr als 146.000 Aufrufe hatte, ohne dass dies erwähnt wurde.

Alles, was benötigt wird, ist die Gesamtsumme der Bildschirmbreite, die das gewünschte Layout einnimmt. Dann muss das übergeordnete Element die gleiche Breite haben und den folgenden Rand anwenden: auto. Das ist es!

Die Elemente im Layout bestimmen die Breite und Höhe des "äußeren" Div. Nehmen Sie für jedes "myFloat" oder Element die Breite oder Höhe, die Ränder, die Ränder und die Abstände und addieren Sie alle zusammen. 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, so dass Rand, Rand und Abstand multipliziert werden x2)

Ein Element mit einer Breite von 10px, einem Rand von 2px, einem Rand von 6px und einem Abstand von 3px würde also so 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>
1
dimmech