it-swarm.com.de

Wie werden 3 Divs (links / Mitte / rechts) in einem anderen Div ausgerichtet?

Ich möchte 3 Divs in einem Container-Div ausrichten, etwa so:

[[LEFT]       [CENTER]        [RIGHT]]

Containerdiv ist 100% breit (keine festgelegte Breite), und das mittlere Div sollte nach dem Ändern der Größe des Containers in der Mitte bleiben.

Also setze ich:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

Aber es wird:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Irgendwelche Tipps?

365
serg

Setzen Sie mit diesem CSS Ihre divs wie folgt (floats first):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

S. Sie können auch nach rechts, dann nach links und dann in die Mitte schweben. Wichtig ist, dass die Schwimmer vor dem "Haupt" -Mittelteil stehen.

PPS Sie möchten häufig das letzte Element in #container diesem Snippet: <div style="clear:both;"></div>, das #container vertikal erweitert, um beide seitlichen Floats zu enthalten, anstatt nur die Höhe von #center und möglicherweise die Seiten nach unten herausragen lassen.

344
dkamins

Wenn Sie Ihre HTML-Struktur nicht ändern möchten, können Sie dem Wrapper-Element auch text-align: center; und dem zentrierten Element display: inline-block; hinzufügen.

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

Live Demo: http://jsfiddle.net/CH9K8/

119
fruechtemuesli

Horizontales Ausrichten von drei Divs mit Flexbox

Hier ist eine CSS3-Methode zum horizontalen Ausrichten von Divs innerhalb eines anderen Divs.

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

jsFiddle

Die Eigenschaft justify-content nimmt fünf Werte an:

  • flex-start (Standard)
  • flex-end
  • center
  • space-between
  • space-around

In allen Fällen befinden sich die drei Divs in derselben Zeile. Eine Beschreibung der einzelnen Werte finden Sie unter: https://stackoverflow.com/a/33856609/3597276


Vorteile der Flexbox:

  1. minimaler Code; sehr effizient
  2. Die vertikale und horizontale Zentrierung ist einfach und problemlos
  3. Spalten gleicher Höhe sind einfach und leicht
  4. mehrere Optionen zum Ausrichten von Flex-Elementen
  5. es reagiert
  6. im Gegensatz zu Floats und Tabellen, die eine begrenzte Layoutkapazität bieten, weil sie niemals zum Erstellen von Layouts gedacht waren, ist flexbox eine moderne (CSS3) Technik mit einer breiten Palette von Optionen.

Weitere Informationen zu flexbox finden Sie unter:


Browser-Unterstützung: Flexbox wird von allen gängigen Browsern unterstützt. - außer IE <1 . Einige neuere Browserversionen, wie Safari 8 und IE10, erfordern Herstellerpräfixe . Um schnell Präfixe hinzuzufügen, verwenden Sie Autoprefixer . Weitere Details in diese Antwort .

105
Michael_B

Die Float-Eigenschaft wird eigentlich nicht zum Ausrichten des Texts verwendet.

Diese Eigenschaft wird verwendet, um ein Element entweder rechts oder links oder in der Mitte hinzuzufügen.

div > div { border: 1px solid black;}
<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>

für float:left wird [First][second][Third] ausgegeben

für float:right wird [Third][Second][First] ausgegeben

Das bedeutet, dass die Eigenschaft float => left das nächste Element links von dem vorherigen hinzufügt. Gleiche Schreibweise wie rechts

Außerdem müssen Sie die Breite des übergeordneten Elements berücksichtigen. Wenn die Summe der Breiten der untergeordneten Elemente die Breite des übergeordneten Elements überschreitet, wird das nächste Element in der nächsten Zeile hinzugefügt

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>

[Erste Sekunde]

[Dritte]

Sie müssen also all diese Aspekte berücksichtigen, um das perfekte Ergebnis zu erzielen

19
Rajiv Pingale

Ich mag meine Bars eng und dynamisch. Dies ist für CSS 3 & HTML 5

  1. Erstens ist die Einstellung der Breite auf 100px begrenzt. Tu es nicht.

  2. Zweitens funktioniert es, wenn die Breite des Containers auf 100% eingestellt wird, bis davon gesprochen wird, dass es sich um eine Kopf-/Fußzeile für die gesamte App handelt, z. B. um eine Navigations- oder eine Abspann-/Copyright-Leiste. Verwenden Sie stattdessen right: 0; für dieses Szenario.

  3. Sie verwenden IDs (Hash #container, #left usw.) anstelle von Klassen (.container, .left usw.). Dies ist in Ordnung, es sei denn, Sie möchten Ihren Stil wiederholen Muster an anderer Stelle in Ihrem Code. Ich würde überlegen, stattdessen Klassen zu verwenden.

  4. Bei HTML muss die Reihenfolge nicht vertauscht werden für: left, center & right. display: inline-block; behebt dieses Problem, indem Ihr Code an eine sauberere und logisch wieder in Ordnung gebrachte Stelle zurückgegeben wird.

  5. Zuletzt müssen Sie die Floats aufräumen, damit sie nicht mit zukünftigen <div> in Konflikt geraten. Das machst du mit dem clear: both;

Zusammenfassen:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS:

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

Bonuspunkt bei Verwendung von HAML und SASS;)

HAML:

.container
  .left
  .center
  .right
  .clear

SASS:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}
13
Eric Wanchic

Zum Ausrichten der Elemente stehen mehrere Tricks zur Verfügung.

1. Mit Table Trick

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

2. Mit Flex Trick

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

. Mit Float Trick

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>
12
Santosh Khalse

Dies ist mit der CSS3 Flexbox einfach zu bewerkstelligen, eine Funktion, die in Zukunft (wenn <IE9 vollständig tot ist) von fast jedem Browser verwendet wird.

Überprüfen Sie die Browser-Kompatibilitätstabelle

HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

Ausgabe:

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>
8
Manoj Kumar

Mit Twitter bootstrap:

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>
4
Ka.

mögliche Antwort, wenn Sie die Reihenfolge der HTML-Dateien beibehalten und nicht flex verwenden möchten.

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

Code Pen Link

3
Pruthvi P

HTML:

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS:

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; sorgt für eine perfekte Mittenausrichtung.

JSFiddle Demo

2
Khalid Farhan

Ich habe einen weiteren Versuch unternommen, dies zu vereinfachen und ohne die Notwendigkeit eines Containers zu erreichen.

HTML

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

CSS

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

Sie können es live unter JSFiddle sehen

1
user15100

Mit Bootstrap erstelle ich 3 Divs gleicher Breite (in 12 Spaltenlayout 4 Spalten für jedes Div). Auf diese Weise können Sie Ihre zentrale Zone auch dann zentrieren, wenn die linken/rechten Abschnitte unterschiedlich breit sind (sofern sie nicht über den Platz der Spalten hinauslaufen).

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

Um diese Struktur ohne Bibliotheken zu erstellen, habe ich einige Regeln aus Bootstrap CSS kopiert.

HTML:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

CopePen

1
mortalis

Sie können dies versuchen:

Ihr HTML-Code sieht so aus:

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

und dein CSS Code sieht so aus:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

die Ausgabe sollte also so aussehen:

[[LEFT]       [CENTER]        [RIGHT]]
0
kishan Radadiya

Hier sind die Änderungen, die ich an der akzeptierten Antwort vornehmen musste, als ich dies mit einem Bild als zentrales Element tat:

  1. Stellen Sie sicher, dass das Bild in einem div eingeschlossen ist (#center in diesem Fall). Wenn dies nicht der Fall ist, müssen Sie display auf block setzen, und es scheint relativ zum Abstand zwischen den schwebenden Elementen zentriert zu sein.
  2. Stellen Sie sicher, dass Sie die Größe des Bildes festlegen nd seines Containers:

    #center {
        margin: 0 auto;
    }
    
    #center, #center > img {
        width: 100px;
        height: auto;
    }
    
0
Sam