Come allineare verticalmente il testo in un div?

Sto cercando di trovare il modo più efficace per allineare il testo con un div. Ho provato alcune cose e nessuna sembra funzionare.

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

Centratura verticale in CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Riepilogo dell'articolo:

Per un browser CSS 2, è possibile utilizzare display:table/ display:table-cellper centrare il contenuto.

Un esempio è disponibile anche su 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>

È possibile unire gli hack per i vecchi browser (Internet Explorer 6/7) in stili con l'uso #per nascondere gli stili dai browser più recenti:

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

Devi aggiungere l' line-heightattributo e quell'attributo deve corrispondere all'altezza di div. Nel tuo caso:

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

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

In effetti, probabilmente potresti rimuovere del heighttutto l' attributo.

Questo funziona solo per una riga di testo , quindi fai attenzione.

Ecco una grande risorsa

A partire dal http://howtocenterincss.com/ :

Centrare in CSS è una seccatura. Sembra che ci siano molti modi per farlo, a seconda di una varietà di fattori. Questo li consolida e ti dà il codice necessario per ogni situazione.

Utilizzando Flexbox

In linea con l'aggiornamento di questo post con le ultime tecnologie, ecco un modo molto più semplice per centrare qualcosa usando Flexbox. Flexbox non è supportato in Internet Explorer 9 e .

Ecco alcune grandi risorse:

• Una guida a Flexbox
• Elementi di centraggio con Flexbox
• Sintassi di Internet Explorer 10 per Flexbox
• Supporto per Flexbox

JSFiddle con prefissi del browser

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>

Un'altra soluzione

Questo è da zerosixthree e ti consente di centrare qualsiasi cosa con sei righe di CSS

Questo metodo non è supportato in Internet Explorer 8 e versioni precedenti .

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

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

Risposta precedente

Un approccio semplice e cross-browser, utile come link nella risposta contrassegnata sono leggermente obsoleti.

Come centrare verticalmente e orizzontalmente il testo sia in un elenco non ordinato sia in un div senza ricorrere alle altezze delle linee JavaScript o CSS . Indipendentemente dalla quantità di testo che hai, non dovrai applicare classi speciali a specifici elenchi o div (il codice è lo stesso per ciascuno). Funziona su tutti i principali browser tra cui Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera e Safari. Esistono due fogli di stile speciali (uno per Internet Explorer 7 e l'altro per Internet Explorer 6) che li aiutano a causa delle limitazioni CSS che i moderni browser non hanno.

Andy Howard: come centrare il testo verticalmente e orizzontalmente in un elenco o div non ordinato

Dato che non mi importava molto di Internet Explorer 7/6 per l'ultimo progetto a cui ho lavorato, ho usato una versione leggermente ridotta (ovvero ho rimosso le cose che lo hanno fatto funzionare in Internet Explorer 7 e 6). Potrebbe essere utile per qualcun altro ...

JSFiddle

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}

<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>

È facile con display: flex. Con il seguente metodo, il testo in divsarà centrato verticalmente:

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

<div>
  Your text here.
</div>

E se vuoi, orizzontale:

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

<div>
  Your text here.
</div>

Devi vedere la versione del browser che ti serve; nelle vecchie versioni il codice non funziona.

Uso quanto segue per centrare verticalmente facilmente elementi casuali:

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

Questo centra il testo nel mio divnell'esatto medio verticale di un esterno di 200 px div. Si noti che potrebbe essere necessario utilizzare un prefisso del browser (come-webkit- nel mio caso) per farlo funzionare per il tuo browser.

Questo funziona non solo per il testo, ma anche per altri elementi.

Puoi farlo impostando il display su 'table-cell' e applicando un vertical-align: middle;:

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

Questo, tuttavia, non è supportato da tutte le versioni di Internet Explorer secondo questo estratto che ho copiato da http://www.w3schools.com/cssref/pr_class_display.asp senza autorizzazione.

Nota: i valori "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row -group "e" ereditare "non sono supportati da Internet Explorer 7 e precedenti. Internet Explorer 8 richiede un! DOCTYPE. Internet Explorer 9 supporta i valori.

La tabella seguente mostra i valori di visualizzazione consentiti anche da http://www.w3schools.com/cssref/pr_class_display.asp .

In questi giorni (non abbiamo più bisogno di Internet Explorer 6-7-8) Vorrei solo usare CSS display: tableper questo problema (o display: flex).

Per i browser più vecchi:

Tavolo:

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

Flettere:

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}

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

Questa è (in realtà era) la mia soluzione preferita per questo problema (semplice e molto ben supportato dal browser):

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}

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

Prova questo, aggiungi il div genitore:

display: flex;
align-items: center;

Ecco una soluzione che funziona meglio per una singola riga di testo.

Può anche funzionare per il testo a più righe con alcune modifiche se il numero di righe è noto.

.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 */
}

Ecco un JSFiddle .

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

È possibile allineare il testo centrale verticalmente all'interno di un div utilizzando Flexbox.

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

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

Puoi saperne di più su Una guida completa a Flexbox .

Controlla questa semplice soluzione:

HTML

<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

Esiste un modo più semplice per allineare verticalmente il contenuto senza ricorrere a table / table-cell:

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

In esso ho aggiunto un div invisibile (larghezza = 0) che assume l'intera altezza del contenitore.

Sembra funzionare in Internet Explorer e Firefox (ultime versioni). Non ho verificato con altri browser

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

E ovviamente il 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%;
}

Questa è la soluzione più pulita che ho trovato (Internet Explorer 9+) e aggiunge una correzione per il problema "off by .5 pixel" utilizzando le transform-stylealtre risposte omesse.

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

Fonte: allineare qualsiasi cosa in verticale con solo 3 righe di CSS

Una soluzione semplice per un elemento di non conoscere valori:

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

Secondo la risposta di Adam Tomat, è stato preparato un esempio JSFiddle per allineare il testo in div :

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

usando display: flex 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 */
}

con un altro esempio e alcune spiegazioni in un post sul blog .

Margine automatico su un elemento griglia.

Analogamente a Flexbox, l'applicazione del margine automatico su un elemento della griglia lo centra su entrambi gli assi:

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

Flexbox ha funzionato perfettamente per me, centrando più elementi all'interno del genitore div orizzontalmente e verticalmente.

Codice HTML:

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

Codice CSS: il
codice seguente impila tutti gli elementi all'interno del div-parent in una colonna, centrando gli elementi in orizzontale e in verticale. Ho usato il div-child per mantenere i due elementi Anchor sulla stessa linea (riga). Senza child-div tutti e tre gli elementi (Anchor, Anchor e Paragrafo) sono impilati uno sopra l'altro nella colonna parent-div. Qui solo il div-child è impilato nella colonna parent-div.

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

Uso:

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>

Con questo trucco, puoi allineare qualsiasi cosa se non vuoi renderlo centrale, aggiungi "left: 0" per allineare a sinistra.

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

Usando flex, fai attenzione alle differenze nel rendering dei browser.

Funziona bene sia per Chrome che per 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>

Confronta con questo che funziona solo con Chrome:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>

Questa è un'altra variante del divin un divmodello utilizzando 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>

Funziona perché:

• position:absoluteper un posizionamento preciso divall'interno di adiv
• noi conosciamo l'altezza del interiore divperché lo impostiamo a 20px.
• calc(50% - 10px)per il 50% - metà dell'altezza per centrare l'internodiv

Funziona bene:

HTML

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

insolenza

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

Senza e con il tag immagine <mat-icon>(che è un carattere).

Hmm, ci sono ovviamente molti modi per risolverlo.

Ma ho un <div>posizionamento posizionato in modo assoluto height:100%(in realtà top:0;bottom:0e larghezza fissa) e display:table-cellnon ha funzionato per centrare il testo verticalmente. La mia soluzione richiedeva un elemento span interno, ma vedo anche molte altre soluzioni, quindi potrei anche aggiungerlo:

Il mio contenitore è a .labele voglio che il numero sia centrato verticalmente in esso. L'ho fatto posizionando top:50%e posizionando assolutamenteline-height:0

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

E il CSS è il seguente:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

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

Guardalo in azione: http://jsfiddle.net/jcward/7gMLx/

Puoi usare css flexbox.

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

L'utilizzo della griglia CSS l'ha fatto per me:

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

Prova a incorporare un elemento tabella.

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

Esistono diversi trucchi per visualizzare il contenuto o un'immagine al centro di un div. Alcune delle risposte sono davvero carine e sono pienamente d'accordo anche con queste.

Centratura orizzontale e verticale assoluta nei CSS

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

Esistono più di 10 tecniche con esempi . Ora tocca a te quello che preferisci.

Senza dubbio, display:table; display:table-Cellè un trucco migliore.

Alcuni buoni trucchi sono i seguenti:

Trucco 1: utilizzando display:table; display:table-cell

HTML

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

Codice CSS

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

Trucco 2: utilizzando display:inline-block

HTML

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

Codice CSS

.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+ */
}

Trucco 3: utilizzando 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>

CSS:

.vertical {
   display: table-caption;
}

Aggiungi questa classe all'elemento che contiene le cose che vuoi allineare verticalmente

Se è necessario utilizzare con la min-heightproprietà è necessario aggiungere questo CSS su:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}