CSS: Wie kann man einen Text Vertikal zentrieren?

Hier ist mein Code: JSFiddle - Code Playground

Wie kann ich hier den Text Vertikal zentrieren. Also den Text in die Mitte schieben?

Answer 1

[Limearts]

Wenn Du dem Element keine feste Höhe und dann mit vertical-align arbeiten möchtest, kannst Du den Text in diesem Fall pragmatisch einfach #small_card_text per line-height in die gewünschte Position bringen.

Woher ich das weiß: Berufserfahrung – selbstständiger Dienstleister und Nerd

Comments

[USERUN]

Danke hat funktioniert. Aber gibt es nicht noch eine professionellere Methode?

Answer 2

[Functional]

Mit Flexbox geht das. Da du #small_card und dem darin enthaltenen Bild feste Höhen und Breiten in Pixel gegeben hast, muss das auch für das Textelement gemacht werden (die 295px minus die 240px, die das Bild einnimmt, also 55px). Dann wird der Container des Textes zur Flexbox gemacht und alles auf beiden Achsen zentriert.

Einfach den #small_card_text CSS-Selektor wie folgt abändern:

#small_card_text {
  color: lightgray;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
}

https://jsfiddle.net/np6v5kmw/1/

Woher ich das weiß: Berufserfahrung – Inhaber einer App-Agentur & 15+ Jahre Programmiererfahrung

Answer 3

[dvar69]

#small_card_text {

  color: wählen;

  height: 55px;

  display: flex;

  justify-content: center;

  align-items: center;

}

Woher ich das weiß: Hobby