Wie kann ich Elemente in einem Div vertikal ausrichten?

Ich habe eine Div mit zwei Bildern und einer h1. Alle von ihnen müssen vertikal innerhalb des Div nebeneinander ausgerichtet sein.

Eines der Bilder muss absoluteinnerhalb des Div positioniert werden.

Was ist das CSS, das benötigt wird, damit es in allen gängigen Browsern funktioniert?

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

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

Verständnis vertical-alignoder "Wie (nicht) Inhalte vertikal zentriert werden" von Gavin Kistner.

"Wie zentriere ich mich in CSS?" zentrieren Sie ist ein großartiges Web-Tool, mit dem Sie die erforderlichen CSS-Zentrierungsattribute für verschiedene Situationen finden können.

Kurz gesagt _{^{(und um Fäulnis zu verhindern)}} :

• Inline-Elemente (und nur Inline-Elemente) können in ihrem Kontext über vertikal ausgerichtet werden vertical-align: middle. 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 haben feste Höhe , können Sie seine Position machen absoluteund geben ihre height, margin-topund topPosition.jsfiddle Beispiel
  • Wenn das zentrierte Element aus einer einzelnen Linie besteht und die übergeordnete Höhe festgelegt ist , können Sie einfach festlegen, dass die Container line-heightihre Höhe ausfüllen. Diese Methode ist meiner Erfahrung nach sehr vielseitig. jsfiddle Beispiel
  • … Gibt es noch mehr solche Sonderfälle.

Jetzt, da die Flexbox-Unterstützung zunimmt, würde dieses auf das enthaltende Element angewendete CSS das enthaltene Element vertikal zentrieren:

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

Verwenden Sie die vorangestellte Version, wenn Sie auch auf Explorer 10 und alte (<4.4) Android-Browser abzielen 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;
}

Ich habe diesen sehr einfachen Code verwendet:

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 a .classoder an verwenden #id, ändert sich das Ergebnis natürlich nicht.

Es hat bei mir funktioniert:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

 .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

Zum Blockieren von Blockelementen in der Mitte (funktioniert in IE9 und höher) ist ein Wrapper erforderlich div:

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

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

Ausgerichtet wie ? Spitzen der Bilder am oberen Rand des Textes ausgerichtet?

Eines der Bilder muss absolut innerhalb des Div positioniert sein.

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

fd hat die Schritte zur absoluten Positionierung beschrieben und die Anzeige des H1Elements so angepasst, dass Bilder inline dazu angezeigt werden. Dazu füge ich hinzu, dass Sie die Bilder mithilfe des vertical-alignStils 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 Kanten ausgerichtet sind. Es gibt andere Ausrichtungsoptionen. siehe die Dokumentation . Möglicherweise ist es auch vorteilhaft, den DIV fallen zu lassen und die Bilder innerhalb des H1Elements zu verschieben. Dadurch erhält der Container einen semantischen Wert, und die Anzeige der folgenden Elemente muss nicht mehr angepasst werden H1:

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

Verwenden Sie diese Formel und es funktioniert immer ohne Risse:

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

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

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

Es wird sogar in IE9 unterstützt.

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

Auf zwei Arten können Sie Elemente vertikal und horizontal ausrichten

1. Bootstrap 4
2. CSS3

1. Bootstrap 4.3.X.

zur vertikalen Ausrichtung: d-flex align-items-center

zur horizontalen 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;  // verticall center
    justify-content: center; // horizontally 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>

Mein Trick besteht darin, eine Tabelle mit 1 Zeile und 1 Spalte in das div einzufügen, 100% der Breite und Höhe festzulegen 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>

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

# 3 Möglichkeiten, um zentrales untergeordnetes Div in einem übergeordneten Div zu machen

• Absolute Positionierungsmethode
• Flexbox-Methode

• Transform / Translate-Methode

  

  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>

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

Ich habe zum Beispiel mehrere Objekte in JSFiddle verschachtelt, aber die Kernidee lautet 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;
 }

Beispiel für mehrere Objekte:

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

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

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 das h1 so einstellen, dass es ein Inline-Flussverhalten aufweist:

#header > h1 { display: inline; }

Um das Bild absolut innerhalb des Div zu positionieren , müssen Sie das enthaltende Div auf eine "bekannte Größe" einstellen, bevor dies ordnungsgemäß funktioniert. Nach meiner Erfahrung müssen Sie auch das Positionsattribut von der Standardeinstellung ändern - position: 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 minimal erforderlichen Attribute zu erhalten, um den gewünschten Effekt zu erzielen.

AKTUALISIEREN:

Hier ist ein vollständiges Beispiel, das unter Firefox 3 funktioniert:

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

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

Hier erstellte Demo: https://jsfiddle.net/xnjq1t22/

Diese Lösung funktioniert gut mit reaktionsschnellen div heightundwidth auch.

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

Bis heute habe ich eine neue Problemumgehung gefunden, um mehrere Textzeilen in einem Div mithilfe von CSS3 vertikal auszurichten (und ich verwende auch das Bootstrap v3-Rastersystem, 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 das unmittelbare übergeordnete Element eines Textes, der ein Element enthält, eine gewisse Höhe haben. Ich hoffe es wird dir auch helfen. Vielen Dank!

Meine neue Lieblingsmethode ist ein 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>

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

Ein einzelliger Tisch im Div übernimmt die vertikale Ausrichtung und ist abwärtskompatibel zur Steinzeit!

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>

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

Bei mir hat es so funktioniert:

<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 mithilfe von Bootstrap-Klassen in eine Schaltfläche konvertiert und ist jetzt vertikal in einem äußeren "div" zentriert.

Mit Display Flex müssen Sie zuerst den Container des Elements umwickeln, das Sie ausrichten möchten.

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

Wenden Sie dann das folgende CSS auf Wrapper Div oder Outdiv in meinem Beispiel an

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

Nur das:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Ein einzelliger Tisch im Div übernimmt die vertikale Ausrichtung und ist abwärtskompatibel zur Steinzeit!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

Hier ist nur ein weiterer (reaktionsfähiger) Ansatz:

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

Ich bin ein .NET-Typ, der gerade mit Webprogrammierung angefangen hat. Ich habe kein CSS verwendet (na ja, ein bisschen). Ich habe ein wenig JavaScript verwendet, um die vertikale Zentrierung zusammen mit der .css-Funktion von jQuery durchzuführen.

Ich poste nur alles von meinem Test. Es ist wahrscheinlich nicht übermäßig elegant, aber es funktioniert soweit.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

<div id="header" style="display: table-cell; vertical-align:middle;">

...

oder CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

Browser-Abdeckung