it-swarm.com.de

CSS-zentrierter Text (horizontal und vertikal) innerhalb eines div-Blocks

Ich habe ein div auf _display:block_ (_90pxheight und width gesetzt, und ich habe Text darin.

Ich brauche den Text in der Mitte sowohl vertikal als auch horizontal ausgerichtet werden.

Ich habe _text-align:center_ ausprobiert, aber es funktioniert nicht im horizontalen Teil. Ich habe _vertical-align:middle_ ausprobiert, aber es hat nicht funktioniert.

Irgendwelche Ideen?

736
Satch3000

Wenn es sich um eine Text- und/oder Bildzeile handelt, ist dies ganz einfach. Benutz einfach:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

Das ist es. Wenn es mehrere Zeilen sein können, ist es etwas komplizierter. Aber es gibt Lösungen auf http://pmob.co.uk/ . Suchen Sie nach "Vertical Align".

Da es sich in der Regel um Hacks handelt oder um das Hinzufügen komplizierter Divs ... Ich verwende normalerweise eine Tabelle mit einer einzelnen Zelle, um dies so einfach wie möglich zu gestalten.


Update für 2016/2017:

Dies kann häufiger mit transform durchgeführt werden und funktioniert auch in älteren Browsern wie Internet Explorer 10 und Internet Explorer 11. Es können mehrere Textzeilen unterstützt werden:

position: relative;
top: 50%;
transform: translateY(-50%);

Beispiel: https://jsfiddle.net/wb8u02kL/1/

So wickeln Sie die Breite ein:

In der obigen Lösung wurde eine feste Breite für den Inhaltsbereich verwendet. Verwenden Sie zum Verwenden einer eingeschrumpften Breite

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Beispiel: https://jsfiddle.net/wb8u02kL/2/

Ich habe Flexbox ausprobiert, aber es wurde nicht so häufig unterstützt, wie es in einer älteren Version von Internet Explorer wie Internet Explorer 10 funktionieren würde.

1184

Gemeinsame Techniken ab 2014:


  • Ansatz 1 - transformtranslateX/translateY:

    Beispiel Hier / Vollbild-Beispiel

    In nterstützten Browsern (den meisten von ihnen) können Sie top: 50%/left: 50% in Kombination mit translateX(-50%) translateY(-50%) verwenden, um das Element dynamisch vertikal/horizontal zu zentrieren.

    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    

  • Ansatz 2 - Flexbox Methode:

    Beispiel Hier / Vollbild-Beispiel

    Setzen Sie in nterstützte Browser das display des Zielelements auf flex und verwenden Sie align-items: center für die vertikale Zentrierung und justify-content: center für die horizontale Zentrierung. Vergessen Sie nicht, Herstellerpräfixe für zusätzliche Browserunterstützung hinzuzufügen ( siehe Beispiel ).

    html, body, .container {
        height: 100%;
    }
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    

  • Ansatz 3 - table-cell/vertical-align: middle:

    Beispiel Hier / Vollbild-Beispiel

    In einigen Fällen müssen Sie sicherstellen, dass die Höhe des Elements html/body auf 100% festgelegt ist.

    Setzen Sie für die vertikale Ausrichtung das width/height des übergeordneten Elements auf 100% und fügen Sie display: table hinzu. Ändern Sie dann für das untergeordnete Element display in table-cell und fügen Sie vertical-align: middle hinzu.

    Für die horizontale Zentrierung können Sie entweder text-align: center hinzufügen, um den Text und alle anderen inline untergeordneten Elemente zu zentrieren. Alternativ können Sie margin: 0 auto verwenden, vorausgesetzt, das Element hat die Stufe block.

    html, body {
        height: 100%;
    }
    .parent {
        width: 100%;
        height: 100%;
        display: table;
        text-align: center;
    }
    .parent > .child {
        display: table-cell;
        vertical-align: middle;
    }
    

  • Ansatz 4 - Absolut positioniert 50% von oben mit Versatz:

    Beispiel Hier / Vollbild-Beispiel

    Bei diesem Ansatz wird davon ausgegangen, dass der Text eine bekannte Höhe hat - in diesem Fall 18px. Positionieren Sie das Element 50% von oben relativ zum übergeordneten Element. Verwenden Sie einen negativen Wert margin-top, der der Hälfte der bekannten Höhe des Elements entspricht, in diesem Fall - -9px.

    html, body, .container {
        height: 100%;
    }
    .container {
        position: relative;
        text-align: center;
    }
    .container > p {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin-top: -9px;
    }
    

  • Ansatz 5 - Die line-height -Methode (am wenigsten flexibel - nicht empfohlen):

    Beispiel Hier

    In einigen Fällen hat das übergeordnete Element eine feste Höhe. Für die vertikale Zentrierung müssen Sie lediglich einen line-height -Wert für das untergeordnete Element festlegen, der der festen Höhe des übergeordneten Elements entspricht.

    Obwohl diese Lösung in einigen Fällen funktioniert, ist es erwähnenswert, dass sie nicht funktioniert, wenn mehrere Textzeilen vorhanden sind - so .

    .parent {
        height: 200px;
        width: 400px;
        text-align: center;
    }
    .parent > .child {
        line-height: 200px;
    }
    

Die Methoden 4 und 5 sind nicht die zuverlässigsten. Gehen Sie mit einem der ersten 3.

423
Josh Crozier

Verwendung von Flexbox/CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

Das CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

Entnommen aus Kurztipp: Die einfachste Möglichkeit, Elemente vertikal und horizontal zu zentrieren

64
Vinod

Fügen Sie Ihrem CSS-Inhalt für dieses Div die Zeile display: table-cell; hinzu.

Nur Tabellenzellen unterstützen den vertical-align: middle;, aber Sie können dem div ...

Ein Live-Beispiel finden Sie hier: http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}
27
FatherStorm

Sie können sehr einfachen Code dafür ausprobieren:

  display: flex;
  align-items: center;
  justify-content: center;
.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="box">
  Lorem
</div>

Codepen link: http://codepen.io/santoshkhalse/pen/xRmZwr

16
Santosh Khalse

Ich benutze immer das folgende CSS für einen Container, um dessen Inhalt horizontal und vertikal zu zentrieren.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Sehen Sie es hier in Aktion: https://jsfiddle.net/yp1gusn7/

15

Geben Sie diese CSS-Klasse an das Ziel <div>:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}
<div class="centered">This text is centered horizontally and vertically</div>
14
Aminu Kano

Ansatz 1

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

Ansatz 2

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>

Ansatz 3

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>
8
shubham agrawal

Eine der besten Methoden besteht darin, die Eigenschaft flex im übergeordneten div zu verwenden und die Eigenschaft margin:auto zum Element-Tag hinzuzufügen:

.parent {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

p {
    margin: auto;
}
8
user3021146
# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}
<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>
4
Arunkumar Maha
div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello, World!!
</div>
2
Debasis Paul
<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>
1
Nikit Barochiya

Sie können die folgenden Methoden ausprobieren:

  1. Wenn Sie ein einzelnes Wort oder einen einzeiligen Satz haben, kann der folgende Code den Trick ausführen.

    Geben Sie einen Text in ein div-Tag ein und geben Sie ihm eine ID. Definieren Sie die folgenden Eigenschaften für diese ID.

    id-name {
      height: 90px;
      line-height: 90px;
      text-align: center;
      border: 2px dashed red;
    }
    

    Hinweis: Stellen Sie sicher, dass die Eigenschaft line-height mit der Höhe der Unterteilung übereinstimmt.

    Bild

    Wenn der Inhalt jedoch mehr als ein einzelnes Wort oder eine Zeile enthält, funktioniert dies nicht. Es kann auch vorkommen, dass Sie die Größe einer Unterteilung nicht in px oder% angeben können (wenn die Unterteilung wirklich klein ist und der Inhalt genau in der Mitte sein soll).

  2. Um dieses Problem zu beheben, können Sie die folgende Kombination von Eigenschaften ausprobieren.

    id-name {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px dashed red;
    }
    

    Bild

    Diese 3 Codezeilen setzen den Inhalt genau in die Mitte einer Unterteilung (unabhängig von der Größe der Anzeige). Das "align-items: center" hilft beim vertikalen Zentrieren, während "justify-content: center" wird horizontal zentriert.

    Hinweis: Flex funktioniert nicht in allen Browsern. Stellen Sie sicher, dass Sie die entsprechenden Herstellerpräfixe für zusätzliche Browserunterstützung hinzufügen.

1
Clinton Roy
.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}
<div class="cell-row">
  <div class="cell cell-middle">Center</div>
</div>
1
antelove

Das funktioniert bei mir (getestet OK!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

Sie können andere Werte als 50% wählen. Zum Beispiel 25% auf 25% des Elternteils zentrieren.

1
XPloRR

Stil anwenden:

position: absolute;
top: 50%;
left: 0;
right: 0;

Ihr Text wird unabhängig von seiner Länge zentriert.

0
techloris_109

Das hat bei mir funktioniert:

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}
0
Ger Mc

Anpassen der Linienhöhe, um die vertikale Ausrichtung zu erhalten.

line-height: 90px;
0
Abhay

Dies sollte die richtige Antwort sein. Am saubersten und einfachsten:

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

Für mich war das die beste Lösung:

HTML:

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}
0
Bence Végert
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
        width: 100%;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p>hello world</p>
    </div>
  </body>
</html>
0
Nikit Barochiya