Frage Wie ordne ich Text in einem Div vertikal an?


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


856
2018-05-30 19:02


Ursprung


Antworten:


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

Artikelübersicht:

Für CSS2 Browser kann man verwenden display:table/display:table-cell Inhalt zentrieren

Probe auch verfügbar bei JSFidel:

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 den alten Browser (IE6 / 7) in Styles mit using zu verschmelzen # Stile aus neueren Browsern ausblenden:

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>


627
2018-05-30 19:29



Sie müssen die hinzufügen line-height Attribut und dieses Attribut muss mit der Höhe des Attributs ü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 wahrscheinlich die entfernen height Attribut insgesamt.

Dies funktioniert nur für eine Textzeile aber sei vorsichtig.


608
2018-02-06 19:21



Update - Hier ist eine großartige Ressource

http://howtocenterincss.com/

Zentrieren in CSS ist ein Schmerz in den Arsch. Es scheint eine Vielzahl 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.

Aktualisieren - Verwenden von Flexbox

In Verbindung mit der Aktualisierung dieses Posts mit der neuesten Technologie, ist es hier eine viel einfachere Art, etwas mit Hilfe von flexbox zu zentrieren. Flexbox wird nicht unterstützt IE9 and lower.

Hier sind einige großartige Ressourcen:

Datei mit Browser-Präfixen

HTML

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

CSS

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

Update - Eine andere Lösung

Das ist von nullosixthree und lässt Sie alles mit 6 Linien von CSS zentrieren

Diese Methode wird in nicht unterstützt IE8 and lower

jsfiddle

HTML

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

CSS

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

Vorherige Antwort

Einfache und Cross-Browser-Ansatz, nützlich als Links in der markierten Antwort sind etwas veraltet.

Wie man Text in einer ungeordneten Liste und in einem div vertikal und horizontal zentriert, ohne auf Javascript- oder css-Linienhöhen zurückgreifen zu müssen. Egal wie viel Text Sie haben, Sie müssen keine speziellen Klassen auf bestimmte Listen oder Divs anwenden (der Code ist für jeden gleich). Dies funktioniert auf allen gängigen Browsern einschließlich IE9, IE8, IE7, IE6, Firefox, Chrome, Opera und Safari. Es gibt 2 spezielle Stylesheets (1 für IE7 und ein anderes für IE6), um ihnen aufgrund ihrer CSS-Einschränkungen zu helfen, die moderne Browser nicht haben.

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

Bearbeiten: Da ich mich für das letzte Projekt, an dem ich arbeitete, nicht sehr für IE7 / 6 interessierte, verwendete ich eine etwas abgespeckte Version (d. H. Entfernte die Sachen, die es in IE7 und 6 funktionierten). Könnte für jemand anderen nützlich sein ...

jsfiddle

HTML

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

Und das CSS:

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

352
2017-11-22 15:18



Es ist einfach mit display: flex. Mit der folgenden Methode wird der Text in der div wird 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 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 Browserversion sehen, die Sie benötigen; In alten Versionen funktioniert der Code nicht.


119
2017-12-12 20:25



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

Dies zentriert den Text in meinem div zur exakten vertikalen Mitte eines 200px-hohen Äußeren div. Beachten Sie, dass Sie möglicherweise ein Browser - Präfix (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.


104
2018-01-24 14:11



Sie können dies tun, indem Sie die Anzeige auf 'table-cell' setzen und eine vertikale Ausrichtung anwenden: middle;

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

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

Hinweis: Die Werte "Inline-Tabelle", "Tabelle", "Tabelle", "Tabellenzelle", "Tabellenspalte", "Tabellenspaltengruppe", "Tabellenzeile", "Tabellenzeilengruppe" ", und" erben "werden von IE7 und früher nicht unterstützt. IE8 benötigt einen! DOCTYPE. IE9 unterstützt die Werte.

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

enter image description here


35
2018-04-18 15:15



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

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

.vcenter{
    background:#eee;
    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">
  <p>This is my Text<br />Text</p>
</div>
<div class="vcenter">
  <p>This is my Text<br />Text<br />Text</p>
</div>


   
   


17
2017-09-15 17:54



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

Es kann auch für mehrzeiligen Text mit einigen Feinabstimmungen funktionieren, 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 ein JSFiddle


7
2017-10-08 06:50



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

7
2018-03-17 05:07



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

JSFidel


5
2018-06-07 08:14



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

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

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

Es scheint in IE und FF zu funktionieren (neueste Versionen), nicht mit anderen Browsern zu überprüfen

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

4
2018-05-25 20:42