html - vertical - vertikal zentrieren word




Wie zentriere ich Text vertikal mit CSS? (20)

Ich habe ein div-Element, das Text enthält, und ich möchte den Inhalt dieses div vertikal zentrieren.

Hier ist mein Div-Stil:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

Was ist der beste Weg, dies zu tun?


Alle Kredite gehen an diesen Link Besitzer @ Sebastian Ekström Link ; Bitte gehen Sie das durch. Sehen Sie es in Aktion codepen . Durch das Lesen des obigen Artikels habe ich auch eine Demo-Geige erstellt .

Mit nur drei CSS-Zeilen (ohne Vendor-Präfixe) können wir dies mit Hilfe einer Transformation tun: translateY zentriert vertikal, was wir wollen, auch wenn wir seine Höhe nicht kennen.

Die Transformation für CSS-Eigenschaften wird normalerweise zum Drehen und Skalieren von Elementen verwendet, aber mit der Funktion translateY können wir jetzt Elemente vertikal ausrichten. Normalerweise muss dies mit absoluter Positionierung oder Einstellung von Zeilenhöhen geschehen, aber diese erfordern, dass Sie entweder die Höhe des Elements kennen oder nur bei einzeiligen Texten usw. arbeiten.

Um dies zu tun, schreiben wir:

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

Das ist alles was du brauchst. Es ist eine ähnliche Technik wie bei der Methode der absoluten Position, aber mit dem Vorteil, dass wir keine Höhe für das Element oder die position-Eigenschaft des Elternelements festlegen müssen. Es funktioniert direkt aus der Box, sogar im Internet Explorer 9 !

Um es noch einfacher zu machen, können wir es als Mixin mit seinen Herstellerpräfixen schreiben.


Als Referenz und um eine einfachere Antwort hinzuzufügen:

Reines CSS:

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

Oder als SASS / SCSS Mixin:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Verwendung von:

.class-to-center {
    @include vertical-align;
}

Von Sebastian Ekströms Blogpost Vertical richtet alles auf nur 3 Zeilen CSS aus :

Diese Methode kann dazu führen, dass Elemente verschwimmen, weil das Element auf einem "halben Pixel" platziert ist. Eine Lösung für dieses Problem besteht darin, das übergeordnete Element auf "3d beibehalten" zu setzen. Wie folgt:

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

Wir leben in 2015+ und Flex Box wird von jedem modernen Browser unterstützt.

So werden Websites von nun an gemacht.

Lern es!


Der folgende Code wird das div in der Mitte des Bildschirms unabhängig von Bildschirmgröße oder div Größe setzen:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Weitere Details zu flex here .


Die Lösung, die als Antwort akzeptiert wird, ist perfekt, um line-height genauso wie die Höhe von div zu verwenden, aber diese Lösung funktioniert nicht perfekt, wenn Text umbrochen wird ODER in zwei Zeilen.

Versuchen Sie dies, wenn der Text umgebrochen ist oder mehrere Zeilen innerhalb eines div enthält.

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

Weitere Informationen finden Sie unter:


Ein anderer Weg:

Setzen Sie nicht das Höhenattribut des div , sondern stattdessen padding: um den Effekt zu erzielen. Ähnlich wie die Zeilenhöhe funktioniert es nur, wenn Sie eine Textzeile haben. Auf diese Weise bleibt der Text zwar zentriert, wenn Sie mehr Inhalt haben, aber das div selbst wird etwas größer sein.

Also anstatt mit zu gehen:

div {
  height:120px;
  line-height: 120px;
}

Sie können sagen:

div {
   padding: 60px 0; //Maybe 60 minus font-size divided by two, if you want to be  exact
}

Dadurch werden die obere und untere padding des div auf 60px und die linke und rechte padding auf null gesetzt, wodurch der div 120px (plus die Höhe der Schriftart) hoch wird und der Text vertikal im div zentriert wird.


Ein besserer, einfacherer und reaktionsfähigerer Ansatz besteht darin, margin-top in CSS auf etwa 45% zu setzen:

margin-top: 45%;

Sie müssen möglicherweise mit dieser Nummer spielen, aber es wird in der Mitte des umgebenden div sein.


Für eine einzelne Textzeile (oder ein einzelnes Zeichen) können Sie diese Technik verwenden:

Es kann verwendet werden, wenn #box nicht feste relative Höhe in% hat .

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

Siehe Live-Demo in JsBin (einfacher zu bearbeiten CSS) oder JsFiddle (einfacher, Höhe des Ergebnisrahmens zu ändern).

Wenn Sie inneren Text in HTML und nicht in CSS platzieren möchten, müssen Sie den Textinhalt in ein zusätzliches Inline- Element #box::after und #box::after bearbeiten, um es #box::after . (Und natürlich content: Eigenschaft sollte entfernt werden.)
Beispielsweise,
<div id="box"><span>TextContent</span></div>
In diesem Fall sollte #box::after zu #box span .

Für die IE8-Unterstützung müssen Sie :: durch : ersetzen.


Flexboxes, die in CSS3 eingeführt wurden, sind die Lösung:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

Hinweis : Ersetzen Sie die Zeile, die als wichtig markiert wurde, durch eine dieser Zeilen, wenn Sie den Text zentrieren möchten:

1) Nur vertikal:

margin: auto 0;

2) Nur horizontal:

margin: 0 auto;

Ich brauchte eine Reihe anklickbarer Elefanten, die vertikal zentriert waren, aber ohne einen Tisch zu benutzen, um die Verrücktheit von Internet Explorer 9 zu umgehen.

Ich fand schließlich das schönste CSS (für meine Bedürfnisse) und es ist großartig mit Firefox, Chrome und Internet Explorer 11. Leider lacht der Internet Explorer 9 immer noch über mich ...

div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
}
<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

Natürlich brauchen Sie die Grenzen nicht, aber sie können Ihnen helfen zu sehen, wie es funktioniert.


Ich habe die vorherigen Antworten gesehen. Sie funktionieren nur für diese Bildschirmbreite (nicht reagierend). Für die Responsive musst du Flex benutzen,

Beispiel

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

Neuere Browser unterstützen jetzt die CSS- calc . Wenn Sie auf diese Browser zielen, möchten Sie vielleicht Folgendes untersuchen:

<div style="position: relative; width: 400px; height: 400px; background-color: red">
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>
</div>

Der Schlüssel ist die Verwendung von style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" innerhalb eines absoluten oder relativ positionierten Elternteils


Probieren Sie diese Lösung aus :

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Errichtet mit CSS + .


Probieren Sie die Transform-Eigenschaft aus:

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>


Sie können auch die folgenden Eigenschaften verwenden.

display: flex; 
align-content: center; 
justify-content : center;

Sie können dies leicht tun, indem Sie den folgenden CSS-Code hinzufügen:

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

Das heißt, Ihr CSS sieht schließlich so aus:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>


Sie können diesen grundlegenden Ansatz ausprobieren:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

Es funktioniert jedoch nur für eine einzelne Textzeile, weil wir die Höhe der Zeile auf die gleiche Höhe wie das umgebende Feld setzen.

Ein vielseitiger Ansatz

Dies ist eine weitere Möglichkeit, Text vertikal auszurichten. Diese Lösung funktioniert für eine einzelne Zeile und mehrere Textzeilen, erfordert jedoch weiterhin einen Container mit fester Höhe:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Das CSS skaliert nur das <div> , zentriert das <span> vertikal vertikal, indem es die <div> des <div> gleich seiner Höhe setzt, und macht das <span> ein Inline-Block mit vertical-align: middle . Dann wird die Zeilenhöhe für die <span> wieder normal eingestellt, so dass ihr Inhalt auf natürliche Weise in den Block fließt.

Simulation der Tischanzeige

Und hier ist eine weitere Option, die bei älteren Browsern, die keine display: table unterstützen , möglicherweise nicht funktioniert display: table und display: table-cell (im Grunde nur Internet Explorer 7). Mit CSS simulieren wir Tabellenverhalten (da Tabellen die vertikale Ausrichtung unterstützen), und das HTML ist dasselbe wie im zweiten Beispiel:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

Mit absoluter Positionierung

Diese Technik verwendet ein absolut positioniertes Element, das oben, unten, links und rechts auf 0 setzt. Es wird in einem Artikel in Smashing Magazine, Absolute horizontale und vertikale Zentrierung in CSS, genauer beschrieben.


Wo auch immer Sie vertikal zentrieren wollen, bedeutet, dass Sie versuchen können display:table-cell und vertical-align:middle .

Beispiel:

#box
{
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}
<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>


Für all Ihre vertikalen Ausrichtungsbedürfnisse!

Deklariere diesen Mixin:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Dann schließe es in dein Element ein:

.element{
    @include vertical-align();
}

.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>


<!DOCTYPE html>
<html>
  <head>
    <style>
      .main{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>Hello</h1>
    </div>
  </body>
</html>






vertical-alignment