it-swarm.com.de

Wie kann ich Text in einem Div vertikal ausrichten?

Ich versuche den effektivsten Weg zu finden, um Text mit einem div auszurichten. Ich habe ein paar Dinge ausprobiert und keine 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>
1063
shinjuo

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/display:table-cell verwenden, um den Inhalt zu zentrieren.

Ein Beispiel finden Sie auch unter JSFiddle :

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) in Formatvorlagen zusammenzuführen, indem Sie # verwenden, um Formatvorlagen für neuere Browser auszublenden:

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>
735
Robert Harvey

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

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}
<div class="center">
  A single line.
</div>

In der Tat könnten Sie wahrscheinlich das height -Attribut insgesamt entfernen.

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

703
David

Hier ist eine großartige Ressource

Von http://howtocenterincss.com/ :

Sich in CSS zu zentrieren ist eine Qual. Es scheint eine Unmenge von Möglichkeiten zu geben, die von einer Vielzahl von Faktoren abhängen. 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, haben Sie mit Flexbox eine viel einfachere Möglichkeit, etwas zu zentrieren. Flexbox wird in Internet Explorer 9 und niedriger nicht unterstützt.

Hier sind einige großartige Ressourcen:

JSFiddle mit Browser-Prä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 aus nullsixthree und lässt Sie alles mit sechs Zeilen CSS 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 sowohl in einer ungeordneten Liste als auch in einem Div vertikal und horizontal, ohne auf JavaScript- oder CSS-Zeilenhöhen zurückzugreifen . Egal wie viel Text Sie haben, Sie müssen keine speziellen Klassen auf bestimmte Listen oder Divs anwenden (der Code ist für alle gleich). Dies funktioniert auf 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 helfen, die moderne Browser nicht haben.

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

Da ich Internet Explorer 7/6 für das letzte Projekt, an dem ich gearbeitet habe, nicht sonderlich mochte, habe ich eine etwas reduzierte Version verwendet (d. H. Das Material entfernt, mit dem es in Internet Explorer 7 und 6 funktioniert 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>
428
Adam Tomat

Mit display: flex ist das ganz einfach. Mit der folgenden Methode wird der Text in div vertikal 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 möchten, 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 von Ihnen benötigte Browserversion sehen. In alten Versionen funktioniert der Code nicht.

173

Ich benutze folgendes, um zufällige Elemente einfach 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 meinem div genau in der vertikalen Mitte eines 200 Pixel hohen äußeren div zentriert. Beachten Sie, dass Sie möglicherweise ein Browser-Präfix (wie in meinem Fall -webkit-) verwenden müssen, damit dies für Ihren Browser funktioniert.

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

108

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

    {
        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", "Tabellenüberschrift", "Tabellenzelle", "Tabellenspalte", "table-column-group", "table-row", "table-row-group" und "inherit" werden von Internet Explorer 7 und früheren Versionen nicht unterstützt. Für Internet Explorer 8 ist ein! DOCTYPE erforderlich. 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 .

Enter image description here

38

In diesen Tagen (wir brauchen keinen Internet Explorer 6-7-8 mehr) würde ich für dieses Problem einfach CSS display: table (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) meine Lieblingslösung für dieses Problem (einfacher und sehr gut unterstützter Browser):

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

Versuchen Sie dies, indem Sie das übergeordnete div hinzufügen:

display: flex;
align-items: center;
9
Kerim092

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

Es kann auch für mehrzeiligen Text mit einigen Optimierungen 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 .

8
Craig
<!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>
8
Nikit Barochiya

Mit Flexbox können Sie den mittleren Text vertikal in einem Div ausrichten.

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

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

Weitere Informationen finden Sie unter Eine vollständige Anleitung zu Flexbox.

7
Cyan Baltazar

Ü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

6
Davors

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-style verwendet wird, das andere Antworten ausgelassen haben.

.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: Vertikale Ausrichtung mit nur 3 Zeilen CSS

5
Justin

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 eingefügt, das die gesamte Höhe des Containers einnimmt.

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

  <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%;
}
5
Earl Hickey

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%);
}
4
dimitar

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 es nach links auszurichten.

3
Sanjeet kumar

Nach der Antwort von Adam Tomat wurde ein JSFiddle Beispiel zum Ausrichten vorbereitet der Text in div :

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

mit 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 weiteren Beispiel und ein paar Erklärungen in einem Blog-Beitrag .

3
Leon Rom

Margin Auto auf einem Gitterelement.

Ähnlich wie bei Flexbox zentriert das Anwenden von margin auto auf ein Rasterelement es auf beiden Achsen:

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

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;
 }
2
ankit sigdel

Seien Sie bei der Verwendung von flex vorsichtig mit Unterschieden beim Rendering des Browsers.

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

.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>
2

Dies ist eine weitere Variation des Musters div in einem div unter Verwendung von 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:absolute für die genaue Platzierung des div innerhalb eines div
  • wir wissen die Höhe des inneren div, weil wir es auf 20px gesetzt haben.
  • calc(50% - 10px) für 50% - halbe Höhe zum Zentrieren des inneren div
1
Stephen Quan

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).

1
V. Kalyuzhnyu

Die Verwendung von CSS Grid 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>
0
ezzato

Sie können css flexbox verwenden.

.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>
0
Nidhin Joseph

Versuchen Sie, ein Tabellenelement einzubetten.

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

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

Aber ich habe einen <div>, der absolut positioniert ist, height:100% (tatsächlich top:0;bottom:0 und feste Breite), und display:table-cell hat einfach nicht funktioniert, um Text vertikal zu zentrieren. Meine Lösung erforderte ein Inner 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 ein .label und ich möchte die Nummer vertikal zentriert haben. Ich habe es getan, indem ich mich absolut auf top:50% positioniert und line-height:0 eingestellt habe.

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

Und das CSS ist 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/

0
Jeff Ward