html - verticale - vertical align css




Come posso centrare verticalmente il testo con i CSS? (20)

È possibile utilizzare il seguente snippet di codice come riferimento. Funziona come un fascino per me:

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

L'output dello snippet di codice sopra riportato è il seguente:

Credito codice sorgente: codepuran.com/web-designing/… codepuran.com/web-designing/…

Ho un elemento div che contiene testo e voglio allineare il contenuto di questo div verticalmente al centro.

Ecco il mio stile div:

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

Qual è il modo migliore per farlo?


Ancora migliore idea per questo. Puoi fare anche questo

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>


Ho visto le risposte precedenti e funzioneranno solo per quella larghezza dello schermo (non reattivo). Per i reattivi devi usare flex.

Esempio:

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

I browser più recenti supportano ora la funzione di calc CSS. Se stai prendendo di mira questi browser, potresti voler fare qualcosa del genere:

<div style="position: relative; width: 400px; height: 400px; background-color: red">
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>
</div>

La chiave è usare style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" all'interno di un div padre assoluto o relativamente posizionato.


Il seguente codice metterà il div al centro dello schermo indipendentemente dalle dimensioni dello schermo o dalla dimensione 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>

Vedi più dettagli su flex here .


Impostalo all'interno del button posto di div se non ti interessa il suo piccolo effetto visivo 3D.

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


Le Flexbox introdotte nei CSS3 sono la soluzione:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}

p {
    margin: auto; /* Important */
    text-align: center;
    font-family: Calibri;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}
<section>
    <p>
        I'm centered!<br/>
        Flexboxes are great!
    </p>
</section>

Nota : sostituisci la linea sopra la quale è contrassegnato come importante con una di queste linee, se vuoi centrare il testo:

1) Solo in verticale:

margin: auto 0;

2) Solo orizzontalmente:

margin: 0 auto;

AGGIORNAMENTO : Come ho notato, questo trucco funziona anche con griglie (display: griglia).


Non sono sicuro che qualcuno abbia seguito il percorso in writing-mode , ma penso che risolva il problema in modo pulito e abbia un ampio supporto :

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

Questo, ovviamente, funzionerà con qualsiasi dimensione di cui hai bisogno (oltre al 100% del genitore). Se disattivi le linee del bordo, ti sarà utile familiarizzare.

Demo JSFiddle per farti smanettare.

Supporto Canius : 85,22% + 6,26% = 91,48% (anche IE è in!)


Per riferimento e per aggiungere una risposta più semplice:

CSS puro:

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

O come Mixin SASS / SCSS:

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

Utilizzare per:

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

Dal post del blog di Sebastian Ekström Verticale allineare qualsiasi cosa con solo 3 linee di CSS :

Questo metodo può rendere gli elementi sfocati a causa dell'elemento posizionato su un "mezzo pixel". Una soluzione per questo è impostare l'elemento padre per preserve-3d. Mi piace seguire:

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

Viviamo nel 2015+ e Flex Box è supportato da tutti i principali browser moderni.

Sarà il modo in cui i siti web sono fatti da qui in avanti.

Imparalo!


Per una singola riga di testo (o un singolo carattere) puoi usare questa tecnica:

Può essere usato quando #box ha altezza relativa e non fissa in% .

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

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

Guarda la demo live su JsBin (più facile da modificare CSS) o JsFiddle (più facile cambiare altezza del frame dei risultati).

Se vuoi inserire il testo interno in HTML, non in CSS, devi avvolgere il contenuto del testo in un ulteriore elemento in linea e modificare #box::after per abbinarlo. (E, naturalmente, il content: proprietà dovrebbe essere rimossa.)
Per esempio,
<div id="box"><span>TextContent</span></div>
In questo caso, #box::after deve essere sostituito in #box span .

Per il supporto IE8 è necessario sostituire :: con :


Prova il seguente codice:

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>


Prova la proprietà di trasformazione:

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


Puoi farlo facilmente aggiungendo il seguente codice CSS:

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

Ciò significa che il tuo CSS alla fine assomiglia a:

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


Puoi provare questo approccio di base:

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

Funziona solo per una singola riga di testo, perché impostiamo l'altezza della linea alla stessa altezza dell'elemento box contenente.

Un approccio più versatile

Questo è un altro modo per allineare il testo verticalmente. Questa soluzione funzionerà per una singola riga e più righe di testo, ma richiede comunque un contenitore ad altezza fissa:

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>

Il CSS dimensiona semplicemente <div> , il centro verticalmente allinea lo <span> impostando l'altezza della linea <div> uguale alla sua altezza, e rende il <span> un blocco in linea con vertical-align: middle . Quindi riporta l'altezza della linea alla normale per lo <span> , quindi il suo contenuto scorrerà naturalmente all'interno del blocco.

Simulazione del display da tavolo

Ed ecco un'altra opzione, che potrebbe non funzionare su browser più vecchi che non supportano display: table e display: table-cell (in pratica solo Internet Explorer 7). Usando i CSS simuliamo il comportamento della tabella (poiché le tabelle supportano l'allineamento verticale) e l'HTML è lo stesso del secondo esempio:

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>

Utilizzando il posizionamento assoluto

Questa tecnica usa un elemento posizionato in modo assoluto in alto, in basso, a sinistra ea destra a 0. È descritto in modo più dettagliato in un articolo su Smashing Magazine, Absolute Horizontal e Vertical Centering in CSS .


Un altro modo (non menzionato qui ancora) è con Flexbox .

Basta aggiungere il seguente codice all'elemento contenitore :

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

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

In alternativa, invece di allineare il contenuto tramite il contenitore , la flexbox può anche centrare un oggetto flessibile con un margine automatico quando c'è un solo oggetto flessibile nel contenitore flessibile (come nell'esempio riportato nella domanda precedente).

Quindi per centrare l'elemento flessibile sia orizzontalmente che verticalmente basta impostarlo con il 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: tutto quanto sopra si applica agli elementi di centraggio mentre li si posiziona in file orizzontali . Questo è anche il comportamento predefinito, perché di default il valore per la flex-direction è la row . Se, tuttavia, gli elementi flessibili devono essere disposti in colonne verticali , quindi flex-direction: column deve essere impostata sul contenitore per impostare l'asse principale come colonna e inoltre le proprietà di justify-content e align-items ora funzionano l'altra andare in giro con il justify-content: center centrare il justify-content: center verticalmente e align-items: center centrare il align-items: center orizzontalmente)

flex-direction: column demo

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

Un buon punto di partenza con Flexbox per vedere alcune delle sue funzionalità e ottenere la sintassi per il massimo supporto del browser è flexyboxes

Inoltre, il supporto browser al giorno d'oggi è molto buono: caniuse

Per la compatibilità cross-browser per la display: flex e align-items , è possibile utilizzare quanto segue:

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;

Un altro modo:

Non impostare l'attributo height del div , ma invece usare padding: per ottenere l'effetto. Analogamente all'altezza della linea, funziona solo se hai una riga di testo. Anche se in questo modo, se hai più contenuti, il testo sarà comunque centrato, ma il div stesso sarà leggermente più grande.

Quindi, invece di andare con:

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

Si può dire:

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

Questo imposterà il padding superiore e inferiore del div a 60px e il padding sinistro e destro a zero, rendendo il div 120px (più l'altezza del font) alto e posizionando il testo verticalmente centrato nel div.


Vorrei solo estendere la risposta di @michielvoo per liberare la necessità di altezza della linea e respirazione dell'altezza div. In pratica è solo una versione semplificata come questa:

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>

NOTA: la parte commentata di css è necessaria per l' fixed-height del div di chiusura.


Approccio flessibile

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>


Posizionamento e stretching assoluti

Come con il metodo sopra questo inizia impostando il posizionamento sugli elementi padre e figlio rispettivamente come relativi e assoluti. Da lì le cose sono diverse.

Nel codice qui sotto ho usato ancora una volta questo metodo per centrare il bambino sia orizzontalmente che verticalmente, sebbene tu possa usare il metodo solo per il centraggio verticale.

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

L'idea con questo metodo è di provare a far sì che l'elemento figlio si estenda su tutti e 4 i bordi impostando i valori superiore, inferiore, destro e sinistro su 0. Poiché il nostro elemento figlio è più piccolo dei nostri elementi genitore non può raggiungere tutto 4 bordi.

L'impostazione automatica come margine su tutti e 4 i lati, tuttavia, fa sì che i margini opposti siano uguali e mostra il nostro div child al centro del div genitore.

Sfortunatamente quanto sopra non funzionerà in IE7 e in basso e, come il metodo precedente, il contenuto all'interno del div figlio può diventare troppo grande causandone la presenza.


.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>







vertical-alignment