html

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>

Antwoord 1, autoriteit 100%

U kunt deze basisbenadering proberen:

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello World!
</div>

Antwoord 2, autoriteit 45%

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

Voeg gewoon de volgende code toe aan het container 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>

Antwoord 3, autoriteit 5%

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 zo uitziet:

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

Antwoord 4, autoriteit 4%

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%);
}

Gebruik door:

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

Door de blogpost van Sebastian Ekstrom Vertical align alles met slechts 3 regels CSS:

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

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

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

Zo worden vanaf nu websites gemaakt.

Leer het!

Antwoord 5, autoriteit 2%

Alle eer gaat naar de eigenaar van deze link @Sebastian Ekstrom Link; ga hier alsjeblieft doorheen. Zie het in actie codepen. Door het bovenstaande artikel te lezen heb ik ook een demoviool gemaakt.

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

De CSS-eigenschap transformatie wordt meestal gebruikt voor het roteren en schalen van elementen, maar met de functie translateY kunnen we nu elementen verticaal uitlijnen. Meestal moet dit worden gedaan met absolute positionering of het instellen van regelhoogten, maar hiervoor moet u ofwel de hoogte van het element weten of alleen werken 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 absolute-positiemethode, maar met het voordeel dat we geen hoogte op het element of positie-eigenschap op de ouder hoeven in te stellen. Het werkt direct uit de doos, zelfs in Internet Explorer 9!

Om het nog eenvoudiger te maken, kunnen we het schrijven als een mix-in met de leveranciersvoorvoegsels.

Antwoord 6, autoriteit 2%

Er is een kleine magie met CSS3-flexboxen:

/* Important */
section {
    display: flex;
    display: -webkit-flex;
}
section p {
    /* Key Part */
    margin: auto;
}
/* Unimportant, coloring and UI */
section {
    height: 200px;
    width: 60%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}
section p {
    text-align: center;
    font-family: Cantarell, Calibri;
    font-size: 15px;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}

<section>
    <p>
        I'm a centered box!<br/>
        Flexboxes are great!
    </p>
</section>

Antwoord 7

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>

Antwoord 8

Ik heb de vorige antwoorden gezien en ze werken alleen voor die breedte van het scherm (niet responsief). Voor de responsive moet je flex gebruiken.

Voorbeeld:

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

Antwoord 9

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

Probeer deze eens als tekst is teruggelopen of op meerdere regels in een div staat.

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

Voor meer referentie, zie:

Antwoord 10

Hier is een andere optie om flexbox te gebruiken.

<div id="container">
  <div class="child">
    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae,
      nemo.</span
    >
  </div>
</div>

CSS

  #container {
    display: flex;
  }
  .child {
    margin: auto;
  }

Resultaat

Hier is een geweldig artikel over centreren in css. bekijk het https://ishadeed.com/article/learn-css-centering/

Antwoord 11

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

Antwoord 12

U kunt het volgende codefragment als referentie gebruiken. Het werkt als een tierelier voor mij:

<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Vertically Center Text</title>
        <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }
        body {
            display: table;
        }
        .centered-text {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        </style>
    </head>
    <body style="background:#3cedd5">
        <div class="centered-text">
            <h1>Yes, it's my landing page</h1>
            <h2>Under construction, coming soon!!!</h2>
        </div>
    </body>
</html>

Antwoord 13

U kunt ook onderstaande eigenschappen gebruiken.

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

Antwoord 14

Een andere manier:

Stel het height attribuut van de div niet in, maar gebruik in plaats daarvan padding: om het effect te bereiken. Net als bij regelhoogte werkt het alleen als je één regel tekst hebt. Hoewel op deze manier, als je meer inhoud hebt, de tekst nog steeds gecentreerd zal zijn, maar de div zelf zal iets groter zijn.

Dus in plaats van mee te gaan:

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

Je kunt zeggen:

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

Hiermee worden de padding van de div bovenaan en onderaan ingesteld op 60px, en de linker en rechter padding op nul zetten, de div 120 pixels (plus de hoogte van je lettertype) hoog maken en de tekst verticaal gecentreerd in de div plaatsen.

Antwoord 15

Ik weet niet zeker of iemand de writing-mode-route heeft gevolgd, maar ik denk dat het het probleem netjes oplost en brede ondersteuning heeft:

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}

<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

Antwoord 16

Voor al uw behoeften op het gebied van verticale uitlijning!

Declareer deze mix:

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

Neem het dan op in je element:

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

Antwoord 17

Een nog beter idee hiervoor. Je kunt dit ook zo doen

body,
html {
  height: 100%;
}
.parent {
  white-space: nowrap;
  height: 100%;
  text-align: center;
}
.parent:after {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}
.centered {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

<div class="parent">
  <div class="centered">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Antwoord 18

Voor een enkele regel tekst (of een enkel teken) kunt u deze techniek gebruiken:

Het kan worden gebruikt wanneer #box een niet-vaste, relatieve hoogte in % heeft.

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

#box::before {
    display: block;
    content: "";
    height: 50%;
}
#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

Bekijk een live demo op JsBin (gemakkelijker om CSS te bewerken ) of JsFiddle (gemakkelijker om de hoogte van het resultaatframe te wijzigen).

Als u binnentekst in HTML wilt plaatsen, niet in CSS, dan moet u de tekstinhoud in een extra inline element plaatsen en #box::after bewerken om matchen. (En natuurlijk moet de eigenschap content: worden verwijderd.)

Bijvoorbeeld,
<div id="box"><span>TextContent</span></div>.
In dit geval moet #box::after worden vervangen door #box span.

Voor Internet Explorer 8-ondersteuning moet u :: vervangen door :.

Antwoord 19

Probeer de eigenschap transform:

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

Antwoord 20

Een zeer eenvoudige & krachtigste oplossing om het midden verticaal uit te lijnen:

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}
.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}

<div class="outer-div">
  <span class="inner">No data available</span>
</div>

Antwoord 21

De eenvoudige en veelzijdige manier is (zoals Michielvoo’s
tafelbenadering):

[ctrv]{
    display:table !important;
}
[ctrv] > *{ /* adressing direct discendents */
      display: table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

Het gebruik van dit kenmerk (of een equivalente klasse) op een bovenliggende tag werkt zelfs voor veel kinderen om uit te lijnen:

<parent ctrv>  <ch1/>  <ch2/>   </parent>

Antwoord 22

De volgende code plaatst de div in het midden van het scherm, ongeacht de schermgrootte of de grootte van de div:

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

Antwoord 23

Probeer de volgende code:

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

div {
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;
}

<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>

Antwoord 24

Ik wil graag het antwoord van Michielvoo om de behoefte aan lijnhoogte en ademhaling van div-hoogte los te laten. Het is eigenlijk gewoon een vereenvoudigde versie zoals deze:

div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>
<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

Antwoord 25

Ik had een rij klikbare olifanten nodig, verticaal gecentreerd, maar zonder een tabel te gebruiken om een internet Explorer 9 gekheid te omzeilen.

Uiteindelijk vond ik de mooiste CSS (voor mijn behoeften) en het is geweldig met Firefox, Chrome en Internet Explorer 11. Helaas lacht Internet Explorer 9 me nog steeds uit…

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="https://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="https://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

Antwoord 26

U kunt de positioneringsmethode in CSS gebruiken:

Controleer het resultaat hier….

HTML:

<div class="relativediv">
  <p>
    Make me vertical align as center
  </p>
</div>

CSS:

.relativediv{position:relative;border:1px solid #ddd;height:300px;width:300px}
.relativediv p{position:absolute:top:50%;transfrom:translateY(-50%);}

Ik hoop dat je deze methode ook gebruikt.

Antwoord 27

Waar je maar wilt, verticaal gecentreerde stijl betekent dat je display:table-cell en vertical-align:middle kunt proberen.

Voorbeeld:

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

Antwoord 28

Stel het in binnen de button in plaats van div als het kleine visuele 3D-effect je niet interesseert.

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}

<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>

Antwoord 29

Absolute positionering en stretching

Net als bij de bovenstaande methode begint deze met het instellen van de positionering op de bovenliggende en onderliggende elementen als respectievelijk relatief en absoluut. Van daaruit verschillen de dingen.

In de onderstaande code heb ik deze methode opnieuw gebruikt om het kind zowel horizontaal als verticaal te centreren, hoewel je de methode alleen voor verticaal centreren kunt gebruiken.

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

Het idee van deze methode is om te proberen het onderliggende element naar alle vier de randen uit te rekken door de waarden boven, onder, rechts en links in te stellen op 0. Omdat ons onderliggende element kleiner is dan onze bovenliggende elementen, kan dat niet alle vier de randen bereiken.

Als u auto instelt als de marge aan alle vier de zijden, zijn de tegenovergestelde marges echter gelijk en wordt onze onderliggende div weergegeven in het midden van de bovenliggende div.

Helaas werkt het bovenstaande niet in Internet Explorer 7 en lager, en net als bij de vorige methode kan de inhoud in de onderliggende div te groot worden, waardoor deze verborgen wordt.

Antwoord 30

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

Voeg deze kleine code toe aan de CSS-eigenschap van je element. Het is geweldig. Probeer het!

Previous articleHoe werkt de Java ‘for each’-lus?

Next articleWaarom krijg ik “ongeldige waarde die niet genegeerd wordt zoals het hoort”?

Hoe centreer ik tekst verticaal met CSS?