Wie richte ich Text in einem Div vertikal aus?

Ich versuche, den effektivsten Weg zu finden, um Text mit einem Div auszurichten. Ich habe ein paar Dinge ausprobiert und keines scheint zu funktionieren.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Vertikale Zentrierung in CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Artikelübersicht:

Für einen CSS 2-Browser kann man display:table/ verwenden, display:table-cellum Inhalte zu zentrieren.

Ein Beispiel ist auch bei JSFiddle erhältlich :

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

Es ist möglich, Hacks für alte Browser (Internet Explorer 6/7) zu Stilen zusammenzuführen, indem #Stile vor neueren Browsern ausgeblendet werden:

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

Sie müssen das line-heightAttribut hinzufügen und dieses Attribut muss mit der Höhe des übereinstimmen div. In Ihrem Fall:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

In der Tat könnten Sie das heightAttribut wahrscheinlich ganz entfernen .

Dies funktioniert jedoch nur für eine Textzeile. Seien Sie also vorsichtig.

Hier ist eine großartige Ressource

Von http://howtocenterincss.com/ :

Das Zentrieren in CSS ist ein Schmerz im Arsch. Es scheint eine Unmenge von Möglichkeiten zu geben, dies zu tun, abhängig von einer Vielzahl von Faktoren. Dies konsolidiert sie und gibt Ihnen den Code, den Sie für jede Situation benötigen.

Flexbox verwenden

Um diesen Beitrag auf dem neuesten Stand der Technik zu halten, ist dies eine viel einfachere Möglichkeit, etwas mit Flexbox zu zentrieren. Flexbox wird in Internet Explorer 9 und niedriger nicht unterstützt .

Hier sind einige großartige Ressourcen:

• Eine Anleitung zur Flexbox
• Elemente mit Flexbox zentrieren
• Internet Explorer 10-Syntax für Flexbox
• Unterstützung für Flexbox

JSFiddle mit Browserpräfixen

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Eine andere Lösung

Dies ist von null bis sechs und ermöglicht es Ihnen, alles mit sechs Zeilen CSS zu zentrieren

Diese Methode wird in Internet Explorer 8 und niedriger nicht unterstützt .

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Vorherige Antwort

Ein einfacher und browserübergreifender Ansatz, der nützlich ist, da Links in der markierten Antwort etwas veraltet sind.

So zentrieren Sie Text vertikal und horizontal sowohl in einer ungeordneten Liste als auch in einem Div, ohne auf JavaScript- oder CSS-Zeilenhöhen zurückzugreifen . Unabhängig davon, wie viel Text Sie haben, müssen Sie keine speziellen Klassen auf bestimmte Listen oder Divs anwenden (der Code ist für jeden gleich). Dies funktioniert in allen gängigen Browsern, einschließlich Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera und Safari. Es gibt zwei spezielle Stylesheets (eines für Internet Explorer 7 und eines für Internet Explorer 6), die ihnen aufgrund ihrer CSS-Einschränkungen, die moderne Browser nicht haben, weiterhelfen.

Andy Howard - Wie man Text in einer ungeordneten Liste oder Div vertikal und horizontal zentriert

Da mir Internet Explorer 7/6 für das letzte Projekt, an dem ich gearbeitet habe, nicht besonders wichtig war, habe ich eine etwas abgespeckte Version verwendet (dh das Material entfernt, das es in Internet Explorer 7 und 6 zum Laufen gebracht hat). Es könnte für jemand anderen nützlich sein ...

JSFiddle

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}

<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>

Es ist einfach mit display: flex. Bei der folgenden Methode wird der Text in divvertikal zentriert:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

Und wenn Sie wollen, horizontal:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

Sie müssen die gewünschte Browserversion sehen. In alten Versionen funktioniert der Code nicht.

Ich verwende Folgendes, um zufällige Elemente leicht vertikal zu zentrieren:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Dadurch wird der Text in my divgenau auf die vertikale Mitte eines 200 Pixel hohen Äußeren zentriert div. Beachten Sie, dass Sie möglicherweise ein Browserpräfix verwenden müssen (wie -webkit-in meinem Fall), damit dies für Ihren Browser funktioniert.

Dies funktioniert nicht nur für Text, sondern auch für andere Elemente.

Sie können dies tun, indem Sie die Anzeige auf 'Tabellenzelle' setzen und Folgendes anwenden vertical-align: middle;:

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

Dies wird jedoch nicht von allen Versionen von Internet Explorer gemäß diesem Auszug unterstützt, den ich ohne Erlaubnis von http://www.w3schools.com/cssref/pr_class_display.asp kopiert habe .

Hinweis: Die Werte "Inline-Tabelle", "Tabelle", "Tabellenbeschriftung", "Tabellenzelle", "Tabellenspalte", "Tabellenspaltengruppe", "Tabellenzeile", "Tabellenzeile" -group "und" inherit "werden von Internet Explorer 7 und früheren Versionen nicht unterstützt. Internet Explorer 8 erfordert einen! DOCTYPE. Internet Explorer 9 unterstützt die Werte.

Die folgende Tabelle zeigt die zulässigen Anzeigewerte auch von http://www.w3schools.com/cssref/pr_class_display.asp .

In diesen Tagen (wir brauchen Internet Explorer 6-7-8 nicht mehr) würde ich nur CSS display: tablefür dieses Problem (oder display: flex) verwenden.

Für ältere Browser:

Tabelle:

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>

Biegen:

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}

<div class="vcenter">
  <p>This is my text</p>
</div>

Dies ist (eigentlich war) meine Lieblingslösung für dieses Problem (einfach und sehr gut vom Browser unterstützt):

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

Versuchen Sie dies, fügen Sie das übergeordnete div hinzu:

display: flex;
align-items: center;

Hier ist eine Lösung, die am besten für eine einzelne Textzeile funktioniert.

Es kann auch für mehrzeiligen Text mit einigen Anpassungen verwendet werden, wenn die Anzahl der Zeilen bekannt ist.

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

Hier ist eine JSFiddle .

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

Sie können den mittleren Text mit Flexbox vertikal innerhalb eines Divs ausrichten.

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

Weitere Informationen finden Sie unter Ein vollständiger Leitfaden für Flexbox .

Überprüfen Sie diese einfache Lösung:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

Es gibt eine einfachere Möglichkeit, den Inhalt vertikal auszurichten, ohne auf Tabelle / Tabellenzelle zurückzugreifen:

http://jsfiddle.net/bBW5w/1/

Darin habe ich ein unsichtbares (width = 0) div hinzugefügt, das die gesamte Höhe des Containers annimmt.

Es scheint in Internet Explorer und Firefox (neueste Versionen) zu funktionieren. Ich habe nicht mit anderen Browsern nachgefragt

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

Und natürlich das CSS:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

Dies ist die sauberste Lösung, die ich gefunden habe (Internet Explorer 9+) und fügt eine Korrektur für das Problem "Aus um 0,5 Pixel" hinzu, indem transform-styleandere Antworten verwendet werden, die weggelassen wurden.

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

Quelle: Richten Sie alles vertikal mit nur 3 CSS-Zeilen aus

Eine einfache Lösung für ein Element, bei dem Werte nicht bekannt sind:

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Nach der Antwort von Adam Tomat wurde ein JSFiddle- Beispiel vorbereitet , um den Text in div auszurichten :

<div class="cells-block">    
    text<br/>in the block   
</div>

mithilfe von display: flex in CSS:

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

mit einem anderen Beispiel und ein paar Erklärungen in einem Blog-Beitrag .

Margin Auto auf einem Gitterelement.

Ähnlich wie bei Flexbox zentriert das automatische Anwenden des Randes auf ein Rasterelement beide Achsen:

.container {
  display: grid;
}
.element {
  margin: auto;
}

Flexbox funktionierte perfekt für mich und zentrierte mehrere Elemente innerhalb des übergeordneten Div horizontal und vertikal.

HTML Quelltext:

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

CSS-Code: Der folgende
Code stapelt alle Elemente innerhalb von parent-div in einer Spalte und zentriert die Elemente horizontal und vertikal. Ich habe das child-div verwendet, um die beiden Anchor-Elemente in derselben Zeile (Zeile) zu halten. Ohne Child-Div sind alle drei Elemente (Anchor, Anchor & Paragraph) in der Spalte des Parent-Div übereinander gestapelt. Hier ist nur child-div in der parent-div-Spalte gestapelt.

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Verwenden:

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

<div class="container">
    <h1>Vertical align text</h1>
</div>

Mit diesem Trick können Sie alles ausrichten, wenn Sie es nicht zentrieren möchten. Fügen Sie "left: 0" hinzu, um links auszurichten.

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

Seien Sie bei der Verwendung von Flex vorsichtig mit Unterschieden beim Rendern von Browsern.

Dies funktioniert sowohl für Chrome als auch für Internet Explorer gut:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>

Vergleichen Sie mit diesem, der nur mit Chrome funktioniert:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>

Dies ist eine weitere Variante des divin einem divMuster unter Verwendung calc()in CSS.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

Das funktioniert, weil:

• position:absolutezur präzisen Platzierung divinnerhalb einesdiv
• Wir kennen die Höhe des Inneren, divweil wir es eingestellt haben 20px.
• calc(50% - 10px)für 50% - die Hälfte der Höhe zum Zentrieren des Innerendiv

Das funktioniert gut:

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

Sass

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

Ohne und mit dem Bild-Tag <mat-icon>(das ist eine Schriftart).

Hmm, es gibt offensichtlich viele Möglichkeiten, dies zu lösen.

Aber ich habe eine <div>, die absolut positioniert ist height:100%(tatsächlich top:0;bottom:0und mit fester Breite) und display:table-celleinfach nicht funktioniert hat, um Text vertikal zu zentrieren. Meine Lösung erforderte ein inneres Span-Element, aber ich sehe, dass viele der anderen Lösungen dies auch tun, also könnte ich es genauso gut hinzufügen:

Mein Container ist a .labelund ich möchte, dass die Nummer vertikal zentriert ist. Ich habe es getan, indem ich absolut positioniert top:50%und eingestellt habeline-height:0

<div class="label"><span>1.</span></div>

Und das CSS lautet wie folgt:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

Sehen Sie es in Aktion: http://jsfiddle.net/jcward/7gMLx/

Sie können CSS verwenden flexbox.

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Die Verwendung des CSS-Rasters hat es für mich getan:

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>

Versuchen Sie, ein Tabellenelement einzubetten.

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>

Es gibt verschiedene Tricks , um Inhalte oder Bilder in der Mitte eines Div anzuzeigen. Einige der Antworten sind wirklich nett und ich stimme auch diesen voll und ganz zu.

Absolute horizontale und vertikale Zentrierung in CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

Es gibt mehr als 10 Techniken mit Beispielen . Jetzt liegt es an Ihnen, was Sie bevorzugen.

Kein Zweifel, display:table; display:table-Cellist ein besserer Trick.

Einige gute Tricks sind die folgenden:

Trick 1 - Mit display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

CSS-Code

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

Trick 2 - Mit display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

CSS-Code

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

Trick 3 - Mit position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

CSS:

.vertical {
   display: table-caption;
}

Fügen Sie diese Klasse dem Element hinzu, das die Elemente enthält, die Sie vertikal ausrichten möchten

Wenn Sie mit der min-heightEigenschaft verwenden müssen, müssen Sie dieses CSS hinzufügen auf:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}