Perché vertical-align: middle non funziona sul mio span o div?

Sto cercando di centrare verticalmente una spano divelemento all'interno di un altro divelemento. Tuttavia quando lo metto vertical-align: middle, non succede nulla. Ho provato a cambiare le displayproprietà di entrambi gli elementi e nulla sembra funzionare.

Questo è quello che sto attualmente facendo nella mia pagina web:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Ecco un jsfiddle dell'implementazione che mostra che non funziona: http://jsfiddle.net/gZXWC/

Questo sembra essere il modo migliore - è passato del tempo dal mio post originale e questo è ciò che dovrebbe essere fatto ora: http://jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

Utilizzando CSS3:

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

Css:

.outer {
  display : flex;
  align-items : center;
  justify-content: center;
}

Nota: questo potrebbe non funzionare nei vecchi IE

Prova questo, funziona molto bene per me:

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

Anche l'impostazione dell'altezza della linea alla stessa altezza in cui contiene div funzionerà

DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

Nel caso in cui non si possa fare affidamento su flexbox ... Posizionare .childal .parentcentro. Funziona quando le dimensioni dei pixel sono sconosciute (in altre parole, sempre) e senza problemi anche con IE9 +.

.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}

<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

Dovresti mettere vertical-align: middlel'elemento interno, non l'elemento esterno. Impostare la line-heightproprietà sull'elemento esterno in modo che corrisponda a quella heightdell'elemento esterno. Quindi impostare display: inline-blocke line-height: normalsull'elemento interno. In questo modo, il testo sull'elemento interno si avvolgerà con una normale altezza della linea. Funziona su Chrome, Firefox, Safari e IE 8+

.main {
    height: 72px;
    line-height:72px;
    border: 1px solid black;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

Violino

L'ho usato per allineare tutto al centro del div wrapper nel caso in cui aiuti chiunque - l'ho trovato più semplice:

div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}

<div class="wrapper">
  <div class="inner">
  </div>
</div>

Ecco un esempio di due modi per eseguire un allineamento verticale. Li uso e funzionano abbastanza bene. Uno utilizza il posizionamento assoluto e l'altro utilizza la flexbox .

Esempio di allineamento verticale

Utilizzando Flexbox, è possibile allineare un elemento da solo all'interno di un altro elemento con l' display: flex;utilizzo align-self. Se è necessario allinearlo anche in orizzontale, è possibile utilizzare align-itemse justify-contentnel contenitore.

Se non si desidera utilizzare flexbox, è possibile utilizzare la proprietà position. Se si rende relativo il contenitore e il contenuto assoluto, il contenuto sarà in grado di spostarsi liberamente all'interno del contenitore. Quindi, se si utilizza top: 0;e left: 0;nel contenuto, verrà posizionato nell'angolo in alto a sinistra del contenitore.

Quindi, per allinearlo, devi solo cambiare i riferimenti superiore e sinistro al 50%. Ciò posizionerà il contenuto al centro del contenitore dall'angolo in alto a sinistra del contenuto.

Quindi è necessario correggere questo traducendo il contenuto metà della sua dimensione a sinistra e in alto.

ecco un ottimo articolo su come allineare vetic .. Mi piace il modo float.

http://www.vanseodesign.com/css/vertical-centering/

HTML:

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

E lo stile corrispondente:

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

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

Impostiamo il div padre da visualizzare come tabella e il div figlio da visualizzare come cella di tabella. Possiamo quindi usare l'allineamento verticale sul div figlio e impostarne il valore al centro. Qualunque cosa all'interno di questo div bambino sarà centrata verticalmente.

È semplice. Aggiungi la display:table-celltua classe principale.

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

Dai un'occhiata a questo jsfiddle !

Ecco l'ultima soluzione più semplice: non è necessario modificare nulla, è sufficiente aggiungere tre righe di regole CSS al contenitore del div in cui si desidera centrare. Adoro Flex Box#LoveFlexBox

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}

<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

indennità

il justify-contentvalore può essere impostato sulle seguenti poche opzioni:

• flex-start, che allineerà il div figlio a dove inizia il flusso flessibile nel suo contenitore principale. In questo caso, rimarrà in cima.

• center, che allinea il div figlio al centro del contenitore principale. Questo è davvero pulito, perché non è necessario aggiungere un div aggiuntivo per avvolgere tutti i bambini per mettere il wrapper in un contenitore padre per centrare i bambini. Per questo motivo, questo è il vero centro verticale (nello column flex-directionstesso modo, se si cambia flow-directionin row, diventerà centrato orizzontalmente.

• flex-end, che allineerà il div secondario al punto in cui termina il flusso flessibile nel relativo contenitore principale. In questo caso, si sposterà verso il basso.

• space-between, che diffonderà tutti i bambini dall'inizio del flusso alla fine del flusso. Se la demo, ho aggiunto un altro div bambino, per mostrare che sono sparsi.

• space-around, simile a space-between, ma con metà dello spazio all'inizio e alla fine del flusso.

Da vertical-align funziona come previsto su a td, è possibile inserire una singola cella tablein divper allineare il suo contenuto.

<div>
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>
</div>

Clunky, ma funziona per quanto posso dire. Potrebbe non avere gli svantaggi delle altre soluzioni alternative.

Inserisci il contenuto in una tabella con altezza del 100% e imposta l'altezza per il div principale

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

Per centrare verticalmente una campata o un elemento div all'interno di un altro div, aggiungere la posizione relativa al div parent e la posizione assoluta al div figlio. Ora il div figlio può essere posizionato in qualsiasi punto all'interno del div. Esempio sotto i centri sia in orizzontale che in verticale.

<div class="parent">
    <div class="child">Vertically and horizontally centered child div</div>
</div>

css:

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Questo è un approccio moderno e utilizza la funzionalità CSS Flexbox. Ora puoi allineare verticalmente il contenuto all'interno del tuo contenitore principale semplicemente aggiungendo questi stili al .maincontenitore

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

E sei a posto!