it-swarm-eu.dev

Wie kann ich Elemente in einem Div vertikal ausrichten?

Ich habe eine Div mit zwei Bildern und einem h1. Sie müssen alle vertikal nebeneinander im div ausgerichtet sein.

Eines der Bilder muss absolute innerhalb des div positioniert sein.

Was ist das CSS, um auf allen gängigen Browsern zu funktionieren?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>
691
Abdu

Wow, dieses Problem ist beliebt. Es basiert auf einem Missverständnis in der Eigenschaft vertical-align. Dieser ausgezeichnete Artikel erklärt es:

Verstehen von vertical-align oder "Wie (nicht) wird der Inhalt vertikal zentriert" von Gavin Kistner.

“So zentrieren Sie in CSS” ist ein großartiges Web-Tool, mit dem Sie die erforderlichen CSS-Zentrierungsattribute für verschiedene Situationen finden können.


In einer Nussschale (und um Linkfäule zu verhindern):

  • Inline-Elemente (und nur Inline-Elemente) können in ihrem Kontext über vertical-align: middle vertikal ausgerichtet werden. Der "Kontext" ist jedoch nicht die gesamte Höhe des übergeordneten Containers, sondern die Höhe der Textzeile, in der sie sich befinden. jsfiddle-Beispiel
  • Bei Blockelementen ist die vertikale Ausrichtung schwieriger und hängt stark von der jeweiligen Situation ab:
    • Wenn das innere Element eine feste Höhe haben kann , können Sie die Position absolute festlegen und die Positionen height, margin-top und top angeben. jsfiddle Beispiel
    • Wenn das zentrierte Element aus einer einzelnen Linie und besteht, ist es Die übergeordnete Höhe ist fest . Sie können einfach den line-height des Containers so einstellen, dass er seine Höhe ausfüllt. Diese Methode ist meiner Erfahrung nach sehr vielseitig. jsfiddle Beispiel
    • … Es gibt noch mehr solche Sonderfälle.
845
Konrad Rudolph

Da die Unterstützung für flexbox zunimmt, würde dieses CSS, das auf das enthaltende Element angewendet wird, das enthaltene Element vertikal zentrieren:

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

Verwenden Sie die Version mit Präfix, wenn Sie auch Explorer 10 und ältere (<4.4) Android Browser als Ziel verwenden müssen:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}
134
E. Serrano

Ich habe diesen sehr einfachen Code benutzt:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Unabhängig davon, ob Sie einen .class oder einen #id verwenden, ändert sich das Ergebnis nicht.

107
user2346571

Es hat bei mir funktioniert:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
45
Romain
 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

Eine Technik von einem Freund von mir:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO hier

21
abernier

Zum Positionieren von Blockelementen in der Mitte (funktioniert in IE9 und höher) wird ein Wrapper div benötigt:

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
17
Blacksonic

Alle von ihnen müssen vertikal innerhalb des div ausgerichtet werden

Ausgerichtet wie ? Oberteile der Bilder am oberen Rand des Texts ausgerichtet?

Eines der Bilder muss absolut innerhalb des div positioniert sein.

Absolut relativ zum DIV positioniert? Vielleicht können Sie skizzieren, wonach Sie suchen ...?

von fd beschrieben die Schritte für die absolute Positionierung sowie die Anpassung der Anzeige des H1 -Elements so, dass Bilder inline dazu erscheinen. Hinzu kommt, dass Sie die Bilder mit dem vertical-align -Stil ausrichten können:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... dies würde den Header und die Bilder zusammenfügen, wobei die oberen Ränder ausgerichtet sind. Andere Ausrichtungsoptionen sind vorhanden. siehe Dokumentation . Es kann auch von Vorteil sein, die DIV abzulegen und die Bilder innerhalb des Elements H1 zu verschieben. Dadurch erhält der Container einen semantischen Wert, und die Anzeige des Elements H1 muss nicht mehr angepasst werden:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>
16
Shog9

Verwenden Sie diese Formel, und es wird immer ohne Risse funktionieren:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For Explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For Explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>
15
Anita Mandal

Fast alle Methoden müssen die Höhe angeben, aber oft haben wir keine Höhen.
Hier ist also ein CSS3 3-Zeilentrick, bei dem die Höhe nicht bekannt sein muss.

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Es wird sogar im IE9 unterstützt.

mit den Herstellerpräfixen:

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Quelle: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

11
Shadowbob

Mein Trick besteht darin, in das div eine Tabelle mit 1 Zeile und 1 Spalte einzufügen, 100% von Breite und Höhe einzustellen und die Eigenschaft vertikal auszurichten: Mitte.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Fiddle: http://jsfiddle.net/joan16v/sbqjnn9q/

11
joan16v

Es gibt zwei Möglichkeiten, Elemente vertikal und horizontal auszurichten

  1. Bootstrap 4
  2. CSS3

enter image description here

1. Bootstrap 4.3.X

für vertikale Ausrichtung: d-flex align-items-center

für horizontale Ausrichtung: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}
<div class="container">
  <div class="child">I am in Center</div>
</div>
6
WasiF

Ab heute habe ich eine neue Problemumgehung gefunden, um mehrere Textzeilen in einem Div mit CSS3 vertikal auszurichten (und ich verwende auch das Gittersystem bootstrap v3, um die Benutzeroberfläche zu verschönern):

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Nach meinem Verständnis muss der unmittelbare Elternteil eines Textes, der ein Element enthält, eine gewisse Höhe haben. Ich hoffe es wird dir auch helfen. Vielen Dank!

3
Shivam

Wir können eine CSS-Funktionsberechnung verwenden, um die Größe des Elements zu berechnen und dann das untergeordnete Element entsprechend zu positionieren.

Beispiel HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

Und CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Demo hier erstellt: https://jsfiddle.net/xnjq1t22/

Diese Lösung eignet sich auch für responsive divheight und width.

Hinweis: Die Calc-Funktion wird nicht auf Kompatibilität mit alten Browsern getestet.

3
Dashrath

Standardmäßig ist h1 ein Blockelement und wird in der Zeile nach dem ersten Bild gerendert. Das zweite Bild wird in der Zeile nach dem Block angezeigt.

Um dies zu verhindern, können Sie den h1 so einstellen, dass er ein Inline-Flow-Verhalten aufweist:

#header > h1 { display: inline; }

Um das img absolut innerhalb des div zu positionieren, müssen Sie das enthaltende div auf eine "bekannte Größe" einstellen, bevor dies richtig funktioniert. Meiner Erfahrung nach müssen Sie auch das Positionsattribut von der Standardposition entfernen: relative funktioniert für mich:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Wenn dies funktioniert, sollten Sie versuchen, die Attribute für Höhe, Breite und Position schrittweise aus div.header zu entfernen, um die erforderlichen Mindestattribute für den gewünschten Effekt zu erhalten.

PDATE:

Hier ist ein vollständiges Beispiel für Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>
3

Mit CSS zur vertikalen Mitte können Sie die äußeren Container wie eine Tabelle und den Inhalt als Tabellenzelle verwenden. In diesem Format bleiben Ihre Objekte zentriert. :)

Ich habe zum Beispiel mehrere Objekte in JSFiddle verschachtelt, aber die Grundidee ist wie folgt:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

Das Beispiel mit mehreren Objekten:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Ergebnis

Result

https://jsfiddle.net/martjemeyer/ybs032uc/1/

3
Henk-Martijn

Meine neue Lieblingsmethode ist mit einem CSS-Raster:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}
<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>
1
Stephen

Verwenden Sie einfach einen Ein-Zellen-Tisch im div! Stellen Sie einfach die Zellen- und Tabellenhöhe auf 100% und Sie können die vertikale Ausrichtung verwenden.

Ein einzelliger Tisch innerhalb des div übernimmt die vertikale Ausrichtung und ist rückwärtskompatibel bis in die Steinzeit!

1
Joel Moses

Bei mir hat es so geklappt:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

Das "a" -Element wurde mit Bootstrap Klassen in eine Schaltfläche konvertiert und ist jetzt vertikal in einem äußeren "div" zentriert.

0
BernieSF

Dies ist meine persönliche Lösung für ein i-Element in einem div

JSFiddle-Beispiel

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}
0
danigonlinea

# 3 Möglichkeiten, das mittlere Kind in ein übergeordnetes Div zu unterteilen

  • Absolute Positionierungsmethode
  • Flexbox-Methode
  • Transformations-/Umsetzungsmethode

    enter image description here

    Demo

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>
0
Vahid Akhtar

Ich verwende die folgende Lösung (ohne Positionierung und ohne Linienhöhe) seit über einem Jahr. Sie funktioniert auch mit IE 7 und 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
0
Arsh