Wie richte ich Text in einem Div vertikal aus?

1185

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>

Shinjuo
quelle

Antworten:

782

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>

Robert Harvey
quelle
3
Der erste Link ist besser, obwohl er kompliziert aussieht, da der zweite Link nur eine Textzeile oder ein Bild verwendet, dessen Höhe Sie kennen. Was ist, wenn Sie 2 oder 3 Textzeilen haben oder wenn Sie die Höhe Ihres Textes nicht kennen, weil er variiert? Wie würde das mit der Zeilenhöhe funktionieren? Also um es zusammenzufassen. Ich habe die erste Version getestet und sie funktioniert unter IE, Firefox UND CHROM.
Raul
954
Ich verstehe nicht, warum wir mit diesem Zeug untergraben sollten? Es ist das 21. Jahrhundert! warum sie einfach keine verdammte Option zum vertikalen Ausrichten von verdammtem Text in CSS enthalten ... wie folgt: Inhaltszentrierung: beide oder vertikal oder horizontal. Es ist einfach unglaublich, dass die seit Jahren verwendete Technologie so dumm ist.
Alexander.Iljushkin
34
@Flextra: Aus diesem Grund verwenden die Leute immer noch Tabellen für das Rasterlayout. Die vertikale Ausrichtung (oder alles mit Höhen- und dynamischen Daten) kann mit reinem CSS eine Herausforderung darstellen. Sie müssen bereit sein, seltsame Hacks wie diesen durchzuführen (was die Idee, Inhalte vom Layout zu trennen, etwas zunichte macht) oder den Multi-Pass-Rendering-Treffer nutzen und nicht statische Tabellen verwenden. Ich hatte noch nie Beschwerden von Endbenutzern, tableobwohl ich CSS-Fanboys routinemäßig das Herz gebrochen habe. Die meisten von ihnen entwerfen nur einfache Blogs und statische Websites. Einige von uns erstellen Unternehmenssoftware und benötigen eine dichte Datenanzeige. Unsere Benutzer legen mehr Wert auf Funktionalität.
nichts ist
6
Ja. Versteh mich nicht falsch, wenn ich eine "Site" baue, gehe ich mit Lean HTML und bevorzuge reines CSS, aber ich weiß nicht, wie oft ich stundenlang mit dem Anstehen gerungen habe, als ich gerade "F it" sagte und a verwendete table. Die Dinge sind jetzt besser, aber einige von uns, die Business-Web-Apps erstellen, müssen ältere Browser unterstützen (IE6 wird bei einigen Kunden immer noch verwendet!), Während Leute, die Blogs erstellen, in den Clouds leben und so tun können, als ob jeder auf der Welt eine hat schnelle Verbindung, neue Computer, und die neueste Version von X - Browser mit CSS 3 usw. Typischer Fall: einige Jira Plugins einreihige Tabellen für das Layout (oder taten sowieso)
nothingisnecessary
61
Es ist ziemlich lächerlich, dass Tabellen als eine Art altmodischer Hack missbilligt werden, den nur ein Neuling verwenden würde, und hier verwenden wir "display: table-cell" in einem DIV als weitaus hackigere Problemumgehung.
Desty
744

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.

David
quelle
368
Ich glaube, das ist nur gültig, wenn Sie eine einzige Textzeile in der div haben.
WEFX
49
Absolut, Sie hätten einen verrückten Zeilenabstand in Ihrem Text, wenn er in mehr als einer Zeile ausgeführt würde.
David
1
@ BobChatting, ja, das tut es. In meiner Antwort finden Sie eine Lösung, die mehrere Textzeilen zulässt.
Adam Tomat
2
Die Zeilenhöhe breitet sich auf alle Kinder aus
KVM
4
funktioniert nicht mit Prozent: Höhe: 100%;
Zeilenhöhe
477

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:

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>

Adam Tomat
quelle
2
Kein Problem. Ich bevorzuge height: x; line-height: x;immer noch die Verwendung, aber meistens brauche ich nicht mehrere Textzeilen. Deshalb liebe ich diese Lösung. Einfach, wiederverwendbar, browserübergreifend, kein js und erfordert nur ein kleines zusätzliches Markup.
Adam Tomat
Wenn der Text größer als das Feld ist, läuft er über. Ich habe verschiedene Möglichkeiten ausprobiert, um den Überlauf zu verhindern, aber alle scheinen mit der Anzeige von Tabellen und Tabellenzellen in Konflikt zu stehen. Sobald ich den Überlauf einschränke, funktioniert die vertikale Zentrierung nicht mehr. jsfiddle.net/2HHLE Irgendwelche Ideen?
Thomas David Baker
Um meine eigene Frage zu beantworten, wenn Sie die Tabellen- / Tabellenzellen-Divs in ein anderes Div mit fester Breite / Höhe und Überlauf einfügen: versteckt, das wird den Trick tun. Ich schrieb es auf bluebones.net/2013/03/…
Thomas David Baker
2
@ThomasDavidBaker, die andere Lösung, wenn Sie diese dynamisch benötigen, besteht darin, eine Höhe von 100% festzulegen. Hier ist ein jsfiddle , im Grunde nur geändert , height: 100px;um height: 100%;sowohl für die liund für .outerContainer.
Adam Tomat
2
Ich möchte hier kein Nasenpicker sein, sondern in der zweiten Lösung von nullsechsunddreißig. Es gibt einen Tippfehler im CSS bei "- wekbit -transform: translateY (-50%);" Trotzdem vielen Dank !! Tolle Lösung!
Gnagy
186

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.

Raul Fernandez Marques
quelle
Kurz und bündig ... so sollte es sein, etwas so Einfaches zu tun. Funktioniert auf IE 11, Chrome und Firefox ... gut genug für mich
Splashout
Diese Antwort funktioniert mit der Positionierung von Text in Fremdkörpern in svg. Vielen Dank!
1
Ich glaube: Flex ist Abhilfe für alles!
DenisKolodin
1
text-align: centerist auch notwendig, weil lange
Textfüllbreite
Ich hatte immer Probleme damit und ich hasse die Antwort, die Linienhöhe zu erhöhen. Das hat sehr gut funktioniert.
Jed Lynch
109

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.

Stefan van den Akker
quelle
3
Ich habe zuverlässigere Ergebnisse mit position: absolute;- Danke! NB Vielleicht möchten Sie aufgenommen werden, -ms-transformoder der IE stopft etwas anderes auf
Wilf
Plunker schlägt vor, -web-kit-transformvorher zu setzen transform. Vielleicht -ms-transformkann das Hinzufügen das Problem von @ ToniMichelCaubet lösen.
Sakovias
39

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 .

Geben Sie hier die Bildbeschreibung ein

Shadrack B. Orina
quelle
2
Großartige Idee! Anzeige: Tabelle-Zelle hat andere Effekte, aber wenn Sie mit ihnen einverstanden sind, ist dies eine schöne Lösung
Brian Low
Es ist auch wichtig, die Höhe des Elements hinzuzufügen.
Elan Perach
Leider Überlauf: versteckt funktioniert nicht auf dem Display: Tabellenzelle
TheJeff
32

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>

Toni Michel Caubet
quelle
2
@Imray fügt er im Grunde ein Inline-Block-Element mit einer Breite von 0 Pixel neben dem Text hinzu (das Pseudo: vorher). Dieser Fauxblock hat jedoch eine Höhe von 100%, was der Trick ist. Da sowohl der Block als auch der Text v-ausgerichtet sind, wird er wie beabsichtigt gerendert.
Dan H
1
beste Antwort, saubere Lösung, IE8 unterstützt
Rocco
Wenn der Text umbrochen wird, können Probleme damit auftreten. Ich habe es behoben, indem ich dem verschachtelten Element Folgendes hinzugefügt habe: Breite: 95%; vertikal ausgerichtet: Mitte;
Trgraglia
Wenn der Text zu lang ist, funktioniert er nicht. Hast du eine Lösung? jsfiddle.net/cyxuy95q
Beta
Stellen Sie,
Toni Michel Caubet
28

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

display: flex;
align-items: center;
Kerim092
quelle
1
Ich mag dieses - Einfach und funktioniert in modernen Browsern
Casper Skovgaard
8

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 .

Craig
quelle
8
<!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>
Nikit Barochiya
quelle
Arbeitete wie ein Zauber, wenn vertikal ausgerichtet: Mitte; und der ganze Rest schlug fehl.
Chiwda
6

Ü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

Davors
quelle
5

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

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

Justin
quelle
4

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

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 .

Leon Rom
quelle
4

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;
}
Sulaymon Hursanov
quelle
4

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;
}
Mimina
quelle
3

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.

Sanjeet Kumar
quelle
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;
 }
Ankit Sigdel
quelle
2

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>

Roman Pokrovskij
quelle
1

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
Stephen Quan
quelle
1
Die Eltern Div würde Position brauchen: Verwandte
Toni Michel Caubet
1

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

Vlad
quelle
0

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/

Jeff Ward
quelle
1
Schön, weil es die einfachste Lösung ist. Nachteil ist, dass es nur für einzeiligen Text funktioniert, siehe Verzweigung des Beispiels mit längerem Text. jsfiddle.net/6sWfw
Tomas Tintera
0

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>

Nidhin Joseph
quelle
0

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>

Ezzato
quelle
0

Versuchen Sie, ein Tabellenelement einzubetten.

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

Mike
quelle
6
Tabellen dienen nur zum Umgang mit tabellarischen Daten. Sie sollten niemals zur Behebung von Layoutproblemen verwendet werden.
Micros
3
Das Schöne an Tabellen ist jedoch, dass sie immer konsistent sind - CSS wird auf so viele verschiedene Arten interpretiert, und das Einfügen verschachtelter DIVs, um etwas Einfaches zu erledigen, fügt zusätzlichen HTML-Code (und Verwirrung) hinzu. CSS ist immer noch grob fehlerhaft
MC9000
4
Ja, das ist leider NOCH die einzige zuverlässige Art und Weise vertikal ausrichten (unbekannt) Text in einem Block. Warum hassen die CSS-Götter Valign so sehr? (ALLE Browser KÖNNEN dies konsistent tun - aber nur in Tabellenzellen)
T4NK3R
-1

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&nbsp;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>
Dhiraj
quelle
-2

CSS:

.vertical {
   display: table-caption;
}

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

Jonny Forney
quelle
-2

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

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