html

Ik probeer de meest effectieve manier te vinden om tekst uit te lijnen met een div. Ik heb een paar dingen geprobeerd en niets lijkt te werken.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Antwoord 1, autoriteit 100%

De juiste manier om dit in moderne browsers te doen, is door Flexbox te gebruiken.

Zie dit antwoordvoor details.

Zie hieronder voor enkele oudere manieren die in oudere browsers werken.

Verticale centrering in CSS

http://www.jakpsatweb.cz/css/css- vertical-center-solution.html

Artikeloverzicht:

Voor een CSS & NBSP; 2 browser, men kan gebruiken display:table/ display:table-cellnaar centrale inhoud.

Een voorbeeld is ook verkrijgbaar bij JSFiddle :

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

Antwoord 2, Autoriteit 98%

U moet de line-heightAttribuut toevoegen en dat kenmerk moet overeenkomen met de hoogte van de div. In uw geval:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

Antwoord 3, Autoriteit 66%

Hier is een geweldige bron

van http://howtocenterincss.com/ :

Centrering in CSS is een pijn in de kont. Er lijkt een gazillion-manieren te zijn om het te doen, afhankelijk van een verscheidenheid aan factoren. Dit consolideert ze en geeft je de code die je nodig hebt voor elke situatie.

Flexbox gebruiken

In lijn met het up-to-date houden van dit bericht met de nieuwste technologie, is hier een veel eenvoudigere manier om iets te centreren met Flexbox. Flexbox wordt niet ondersteund in Internet Explorer 9 en lager.

Hier zijn enkele geweldige bronnen:

JSFiddle met browservoorvoegsels

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Antwoord 4, autoriteit 24%

Het is gemakkelijk met display: flex. Met de volgende methode wordt de tekst in de divverticaal gecentreerd:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

Antwoord 5, autoriteit 13%

Ik gebruik het volgende om willekeurige elementen gemakkelijk verticaal te centreren:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Hierdoor wordt de tekst in mijn divgecentreerd op het exacte verticale midden van een 200px hoge buitenste div. Houd er rekening mee dat u mogelijk een browservoorvoegsel moet gebruiken (zoals -webkit-in mijn geval) om dit voor uw browser te laten werken.

Dit werkt niet alleen voor tekst, maar ook voor andere elementen.

Antwoord 6, autoriteit 7%

Probeer dit, voeg de bovenliggende div toe:

display: flex;
align-items: center;

Antwoord 7, autoriteit 5%

U kunt dit doen door de weergave in te stellen op ‘table-cell’ en een vertical-align: middle;:

toe te passen

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

Dit wordt echter niet door alle versies van Internet Explorer ondersteund volgens dit fragment dat ik heb gekopieerd van http://www.w3schools.com/cssref/pr_class_display.aspzonder toestemming.

Opmerking:de waarden “inline-table”, “table”, “table-caption”, “table-cell”, “table-column”, “table-column-group”, “table-row”, “table-row-group” en “inherit” worden niet ondersteund door Internet Explorer 7 en eerder. Internet Explorer 8 vereist een !DOCTYPE. Internet Explorer 9 ondersteunt de waarden.

De volgende tabel toont de toegestane weergavewaarden ook van http://www .w3schools.com/cssref/pr_class_display.asp.

Antwoord 8, autoriteit 4%

Tegenwoordig (we hebben Internet Explorer 6-7-8 niet meer nodig) zou ik gewoon CSS display: tablegebruiken voor dit probleem (of display: flex).

Voor oudere browsers:

Tabel:

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}
.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>

Antwoord 9, autoriteit 2%

Flexboxwerkte perfect voor mij, waarbij meerdere elementen werden gecentreerd binnen bovenliggende div horizontaal & verticaal.

HTML-code:

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

CSS-code:
Onderstaande code stapelt alle elementen binnen parent-div in een kolom, waarbij de elementen horizontaal worden gecentreerd & verticaal.
Ik heb de child-div gebruikt om de twee Anchor-elementen op dezelfde regel (rij) te houden. Zonder child-div worden alle drie de elementen (Anker, Anchor & Paragraaf) in de kolom van de parent-div op elkaar gestapeld. Hier wordt alleen child-div gestapeld in de parent-div-kolom.

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Antwoord 10

Hier is een oplossing die het beste werkt voor een enkele regel tekst.

Het kan ook werken voor tekst met meerdere regels, met wat aanpassingen als het aantal regels bekend is.

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

Hier is een JSFiddle.

Antwoord 11

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>
</html>

Antwoord 12

U kunt centrale tekst verticaal in een DIV-tekst uitlijnen met behulp van FLEXBOX.

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>
div {
   display: flex;
   align-items: center;
}

U kunt er meer over leren op een compleet Gids voor FLEXBOX .

Antwoord 13

Controleer deze eenvoudige oplossing:

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}
.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

Antwoord 14

Er is een eenvoudigere manier om de inhoud verticaal uit te lijnen zonder toevlucht te nemen tot table/table-cell:

http://jsfiddle.net/bBW5w/1/

Daarin heb ik een onzichtbare (breedte=0) div toegevoegd die de volledige hoogte van de container aanneemt.

Het lijkt te werken in Internet Explorer en Firefox (laatste versies). Ik heb niet gecontroleerd met andere browsers

 <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

En natuurlijk de CSS:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

Antwoord 15

Dit is de schoonste oplossing die ik heb gevonden (Internet Explorer 9+) en voegt een oplossing toe voor het “off by .5 pixel”-probleem door gebruik te maken van transform-styledie andere antwoorden hadden weggelaten .

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Bron: Alles verticaal uitlijnen met slechts 3 regels CSS

Antwoord 16

U kunt het weergaveraster en het midden van de plaatsitems gebruiken:

.container {
  width: 200px;
  height: 200px;
  border: solid red;
  display: grid;
  place-items: center;
}

<div class="container">
  Lorem, ipsum dolor.
</div>

Antwoord 17

Een eenvoudige oplossing voor een element van het niet kennen van waarden:

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Antwoord 18

Volgens het antwoord van Adam Tomat is er een JSFiddlevoorbeeldom de tekst uit te lijnen in div:

<div class="cells-block">    
    text<br/>in the block   
</div>

door display:flexte gebruiken in CSS:

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

met een ander voorbeelden een paar uitleg in een blogbericht.

Antwoord 19

Marge automatisch op een rasteritem.

Net als bij Flexbox, centreert het toepassen van marge automatisch op een rasteritem het op beide assen:

.container {
  display: grid;
}
.element {
  margin: auto;
}

Antwoord 20

HTML :

<div class="col-md-2 ml-2 align-middle">
    <label for="option2" id="time-label">Time</label>
</div>

CSS :

.align-middle {
    margin-top: auto;
    margin-bottom: auto;
}

Antwoord 21

Gebruik:

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

<div class="container">
    <h1>Vertical align text</h1>
</div>

Antwoord 22

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

.relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

Antwoord 23

Gebruik flex, wees voorzichtig met verschillen in de weergave van browsers.

Dit werkt goed voor zowel Chrome als Internet Explorer:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}
.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>

Antwoord 24

Dit is een andere variant van de divin een div-patroon met behulp van calc()in CSS.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

Dit werkt, omdat:

position:absolutevoor nauwkeurige plaatsing van de divbinnen een div
we wetende hoogte van de binnenste divomdat we deze hebben ingesteld op 20px.
calc(50% - 10px)voor 50% – halve hoogtevoor het centreren van de binnenste div

Antwoord 25

Dit werkt prima:

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

Sass

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

Zonder en met de afbeeldingstag <mat-icon>(wat een lettertype is).

Antwoord 26

U kunt css flexboxgebruiken.

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Antwoord 27

Hmm, er zijn natuurlijk veel manieren om dit op te lossen.

Maar ik heb een <div>die absoluut is gepositioneerd, height:100%(eigenlijk top:0;bottom:0en vaste breedte) en display:table-cellwerkten gewoon niet om tekst verticaal te centreren. Mijn oplossing vereiste wel een binnenoverspanningselement, maar ik zie dat veel van de andere oplossingen dat ook doen, dus ik kan het net zo goed toevoegen:

Mijn container is een .labelen ik wil dat het nummer er verticaal in gecentreerd wordt. Ik deed het door absoluut op top:50%te positioneren en line-height:0

in te stellen

<div class="label"><span>1.</span></div>

En de CSS is als volgt:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}
.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

Bekijk het in actie: http://jsfiddle.net/jcward/7gMLx/

Antwoord 28

Het gebruik van CSS-raster deed het voor mij:

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}
.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>

Antwoord 29

Er zijn verschillende trucsom inhoud of een afbeelding in het midden van een div weer te geven. Sommige antwoorden zijn erg aardig en daar ben ik het ook volledig mee eens.

Absolute horizontale en verticale centrering in CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

Er zijn meer dan 10 technieken met voorbeelden. Nu is het aan jou wat je voorkeur heeft.

Ongetwijfeld display:table; display:table-Cellis een betere truc.

Enkele goede trucs zijn de volgende:

Trick 1 – Door display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

CSS-code

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

Truc 2 – Met behulp van display:inline-block

HTML

<div class="Center-Container is-Inline"> <div class="Center-Block"> CONTENT </div> </div>

CSS-code

.Center-Container.is-Inline { text-align: center; overflow: auto; } .Center-Container.is-Inline:after, .is-Inline .Center-Block { display: inline-block; vertical-align: middle; } .Center-Container.is-Inline:after { content: ''; height: 100%; margin-left: -0.25em; /* To offset spacing. May vary by font */ } .is-Inline .Center-Block { max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */ /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */ }

Trick 3 – Met behulp van position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;"> <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;"> <h4>ABSOLUTE CENTER, <br/> WITHIN CONTAINER.</h4> <p>This box is absolutely centered, horizontally and vertically, within its container</p> </div> </div>

Antwoord 30

Probeer een tabelelement in te sluiten.

<div> <table style='width:200px; height:100px;'> <td style='vertical-align:middle;'> copenhagen </td> </table> </div>

Previous articlePHP-verbinding mislukt: SQLSTATE[HY000] [2002] Verbinding geweigerd
Next articleWat doet het PHP-foutmelding “Kennisgeving: gebruik van undefined constant” gemiddelde?

Other episodes

Invoertype=wachtwoord, laat de browser het wachtwoord niet onthouden

html Code Expert - February 28, 2023 0

Ik herinner me dat ik een manier heb gezien om een <input type="password" />te hebben, zodat de browser nietde gebruiker vraagt om het wachtwoord...

Read more

VueJS/browser caching productie builds

html Code Expert - December 29, 2022 0

Ik heb een VueJS-app. Telkens wanneer ik npm run builduitvoer, wordt er een nieuwe set dist/*-bestanden gemaakt, echter wanneer ik ze op de server...

Read more

Verhogingspijlen aanpassen bij invoer van typenummer met CSS

html Code Expert - November 12, 2022 0

Ik heb een typenummer ingevoerd dat wordt weergegeven met de volgende code: <input class="quantity" id="id_form-0-quantity" min="0" name="form-0-quantity" value="1" type="number"> Het ziet er zo uit: Ik zou...

Read more

Angular 4 img src is niet gevonden

html Code Expert - November 10, 2022 0

Ik heb een probleem met het vinden van een afbeelding met hoek 4. Hij blijft me vertellen dat de afbeelding niet is gevonden. Mapstructuur: app_folder/ app_component/ ...

Read more

HTML-tags binnen <label>

html Code Expert - October 21, 2022 0

Ik heb een tabel op een pagina die bestaat uit selectievakjes in de cellen aan de linkerkant en beschrijvingen in de cellen aan de...

Read more

Items die alle kolommen/rijen beslaan met behulp van CSS-rasterlay-out

html Code Expert - October 7, 2022 0

Nu de CSS-rasterlay-outmodule binnenkort in Firefox en Chrome wordt geleverd, dacht ik dat ik zou proberen te begrijpen hoe ik het moet gebruiken. Ik heb...

Read more

Angular 2 Hash (#) van de URL verwijderen

html Code Expert - October 4, 2022 0

Ik probeer het #-teken van de url in Angular 2 te verwijderen, maar ik kon geen goede uitleg vinden over hoe ik het kan...

Read more