Vraag Hoe centreer ik tekst verticaal met CSS?


Ik heb een div-element dat tekst bevat en ik wil de inhoud van deze div verticaal uitlijnen.

Hier is mijn div-stijl:

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

Wat is de beste manier om dit te doen?


1804
2018-01-14 21:25


oorsprong


antwoorden:


U kunt deze basisaanpak proberen:

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

Het werkt echter maar voor één tekstregel, omdat we de hoogte van de lijn op dezelfde hoogte instellen als het element dat de box bevat.


Een meer veelzijdige aanpak

Dit is een andere manier om tekst verticaal uit te lijnen. Deze oplossing werkt voor een enkele regel en meerdere regels tekst, maar er is nog steeds een container met vaste hoogte nodig:

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>

De CSS heeft alleen de grootte <div>, verticaal midden lijnt de <span> door het instellen van <div>De lijnhoogte is gelijk aan de hoogte en maakt de <span> een inline-blok met vertical-align: middle. Vervolgens wordt de regelhoogte weer normaal voor de <span>, dus de inhoud zal natuurlijk in het blok vloeien.


Tafelweergave simuleren

En hier is nog een andere optie, die misschien niet op oudere leeftijd werkt browsers die geen ondersteuning bieden display: table en display: table-cell (eigenlijk alleen Internet Explorer 7). Met behulp van CSS simuleren we het tabelgedrag (aangezien tabellen verticale uitlijning ondersteunen), en de HTML is hetzelfde als het tweede voorbeeld:

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>


Absolute positionering gebruiken

Deze techniek gebruikt een absoluut gepositioneerde elementinstelling bovenaan, onderaan, links en rechts tot 0. Dit wordt in meer detail beschreven in een artikel in Smashing Magazine, Absoluut horizontaal en verticaal centreren in CSS.


2447
2018-03-06 08:15



Een andere manier (hier nog niet genoemd) is met Flexbox.

Voeg gewoon de volgende code toe aan de houder element:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Flexbox-demo 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

Als alternatief, in plaats van het afstemmen van de inhoud via de houder, flexbox kan ook de a centreren flex item Met een automatische marge  wanneer er slechts één flex-item in de flexcontainer zit (zoals het voorbeeld in de bovenstaande vraag).

Dus om het flexitem zowel horizontaal als verticaal te centreren, stelt u het gewoon in margin:auto

Flexbox-demo 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

NB: Al het bovenstaande is van toepassing op het centreren van items tijdens het leggen ervan horizontale rijen. Dit is ook het standaardgedrag, omdat standaard de waarde voor flex-direction is row. Als er echter flex-items moeten worden neergelegd verticale kolommen, dan flex-direction: column moet worden ingesteld op de container om de hoofd-as in te stellen als kolom en daarnaast de justify-content en align-items eigenschappen werken nu andersom met justify-content: center verticaal centreren en align-items: center horizontaal centreren)

flex-direction: column demonstratie

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

Een goede plek om met Flexbox te beginnen om enkele van zijn functies te zien en een syntaxis te krijgen voor maximale ondersteuning van de browser flexyboxes 

Ook is browserondersteuning tegenwoordig erg goed: kan ik gebruiken

Voor compatibiliteit met meerdere browsers voor display: flex en align-items, je kunt het volgende gebruiken:

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

956
2018-01-14 21:29



U kunt dit eenvoudig doen door het volgende stukje CSS-code toe te voegen:

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

Dat betekent dat je CSS er uiteindelijk uitziet als:

#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>


109
2017-10-25 18:12



Ter referentie en om een ​​eenvoudiger antwoord toe te voegen:

Pure CSS:

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

Of als een SASS / SCSS Mixin:

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

Gebruiken voor:

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

Door de blogpost van Sebastian Ekström Verticaal lijn alles uit met slechts 3 regels CSS:

Deze methode kan ervoor zorgen dat elementen wazig worden doordat het element op een "halve pixel" wordt geplaatst. Een oplossing hiervoor is om het bovenliggende element in te stellen op behoud-3d. Zoals volgende:

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

We leven in 2015+ en Flexbox wordt ondersteund door elke grote moderne browser.

Het is de manier waarop websites vanaf hier worden gemaakt.

Leer het!


97
2017-08-11 11:59



Alle lof gaat naar deze eigenaar van de link @ Sebastid Ekström Link; ga hier alsjeblieft doorheen. Zie het in actie codepen. Door het bovenstaande artikel te lezen dat ik ook heb gemaakt een demo-viool.

Met slechts drie regels CSS (exclusief leveranciersprefixen) kunnen we dit doen met behulp van een transformatie: translateY centreert verticaal wat we willen, zelfs als we de hoogte niet weten.

De omzetting van de CSS-eigenschap wordt meestal gebruikt voor het roteren en schalen van elementen, maar met de translateY-functie kunnen we elementen nu verticaal uitlijnen. Meestal moet dit worden gedaan met absolute positionering of het instellen van lijnhoogten, maar deze vereisen dat u de hoogte van het element kent of alleen werkt op tekst met één regel, enz.

Dus om dit te doen schrijven we:

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

Dat is alles wat je nodig hebt. Het is een vergelijkbare techniek als de methode met de absolute positie, maar met het voordeel dat we geen hoogte op het element of de positie-eigenschap op de ouder hoeven in te stellen. Het werkt rechtstreeks uit de doos, zelfs in Internet Explorer 9!

Om het nog eenvoudiger te maken, kunnen we het schrijven als een mix met de prefixen van de leverancier.


49
2017-12-13 20:09



Flexboxes die werden geïntroduceerd in CSS3 zijn de oplossing:

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>

Notitie: Vervang de regel waarboven gemarkeerd als belangrijk met een van deze regels, als u de tekst wilt centreren:

1) Alleen verticaal:

margin: auto 0;

2) Alleen horizontaal:

margin: 0 auto;

BIJWERKEN: Zoals ik opmerkte, werkt deze truc ook met rasters (display: raster).


22
2017-08-28 10:11



Flexibele aanpak

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>


13
2018-06-29 09:26



De oplossing die als het antwoord wordt geaccepteerd, is perfect om te gebruiken line-height hetzelfde als de hoogte van div, maar deze oplossing werkt niet perfect wanneer de tekst is ingepakt OF in twee regels staat.

Probeer deze uit als de tekst is ingepakt of op meerdere regels in een div staat.

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

Zie voor meer informatie:


13
2018-04-15 08:28



U kunt ook onderstaande eigenschappen gebruiken.

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

9
2017-12-01 18:06



Proberen deze oplossing:

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

Gebouwd met CSS +.


9
2018-05-28 07:41