Wie zentriere ich Text innerhalb eines Divs vertikal?

So richten Sie Text in einem Div vertikal aus

Beim Arbeiten mit einem Div ist es manchmal notwendig, sicherzustellen, dass der darin enthaltene Text ausgerichtet ist vertikal in der Mitte. Dies kann durch verschiedene Methoden erreicht werden.

Zeilenhöhe verwenden

Wenn das Div eine feste Höhe hat, z. B. 50 Pixel, können Sie einfach die Zeilenhöhe verwenden CSS-Eigenschaft.

#abc {
  height: 50px;
  line-height: 50px;
}

Dadurch wird der Text vertikal innerhalb der zentriert div.

Anzeigeeigenschaften verwenden

Für mehrzeiligen Text können Sie ihn in ein Span-Element einschließen und Anzeigeeigenschaften anwenden und vertikal ausrichten.

#abc {
  display: table;
  width: 100%;
}

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

Verwenden der Transformationseigenschaft

Eine andere Methode besteht darin, die Transformationseigenschaft mit dem zu verwenden TranslateY()-Funktion. Dies ist besonders nützlich für ältere Browser, die keine Anzeigeeigenschaften unterstützen.

#abc {
  position: relative;
}

#abc p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Das obige ist der detaillierte Inhalt vonWie zentriere ich Text innerhalb eines Divs vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!