verticale si allinea a lavorare su inline-block

mi è stato detto che:verticale si allinea a lavorare su inline-block

verticale allineare funziona solo per linea, linea-blocchi, immagini e tavolo elementi.
Deve essere applicato sull'elemento figlio, in opposizione all'elemento padre , a differenza del testo allineato.

Tuttavia, quando ho provato a impostare il centro di allineamento verticale su un elemento di blocco in linea, non ha funzionato. Perché?

#wrapper { 
 
border: 1px solid black; 
 
width: 500px; 
 
height: 500px; 
 
} 
 
#content { 
 
border: 1px solid black; 
 
display: inline-block; 
 
vertical-align: middle; 
 
}

<div id = 'wrapper'> 
 
<div id = 'content'> content </div> 
 
</div>

fonte

2016-02-20 frosty

@Oriol ho significava mezzo. E prima che tu chieda, sì, il mezzo è un valore valido. http://www.w3schools.com/cssref/pr_pos_vertical-align.asp E cosa intendi per box di linea? – frosty

@Oriol Inoltre, non sto cercando un modo diverso per farlo. Sto solo cercando una spiegazione del motivo per cui questo non funziona, quindi per favore togli il marchio duplicato. – frosty

@Oriol Se sto capendo correttamente, ti riferisci a #content come box di riga? Perché qui ci sono solo 2 elementi, il # wrapper e #content. – frosty

Non funziona perché vertical-align imposta l'allineamento dei contenuti a livello di riga rispetto alla loro casella di riga, non al loro blocco contenitore:

Questa proprietà influisce sul posizionamento verticale all'interno di una casella di riga di caselle generate da un elemento a livello di riga.

Un line box è

L'area rettangolare che contiene le caselle che formano una linea

Quando si vede un testo che ha più righe, ognuno è un box di riga. Ad esempio, se si dispone di

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

Se c'è solo una singola riga, come nel tuo caso, è anche una scatola di linea

Utilizzo di centri vertical-align: middle.content verti cally all'interno di quella casella di riga. Ma il problema è che la casella di riga non è centrata verticalmente all'interno del blocco contenitore.

Se si vuole centrare qualcosa in verticale al centro del blocco contenitore vedere How to align text vertically center in div with CSS?

fonte

2016-02-21 02:21:39 Oriol

pertanto, se è un testo a riga singola garantita e l'altezza della riga ha la stessa lunghezza dell'altezza del contenitore, il testo del contenuto si troverà al centro del contenitore. ie: '#conten {altezza riga: 500px}' https://jsfiddle.net/28ng9ovs/ –

@AizzatSuhardi Sì, ed è possibile utilizzare 'white-space: nowrap' per evitare interruzioni di riga. – Oriol

Vertical-align sul elemento inline/inline-block, immagini, testo ... align elemento insieme, non con i genitori.

esempio

Usage: allineare immagine smiley in un testo

si può barare con l'aggiunta di una larghezza 0px, 100% pseudo-elemento altezza

#wrapper { 
 
    border: 1px solid black; 
 
    width: 200px; 
 
    height: 200px; 
 
    vertical-align: middle; 
 
} 
 
#wrapper:after{ 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 0px; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 
#content { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div id = 'wrapper'> 
 
    <div id = 'content'> content </div> 
 
</div>

fonte

2016-02-21 02:17:59

il lavoro per me utilizzando vertical-align: text-top;

<div class="box"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div> 
<div class="box"> 
    Lorem ipsum dolor sit amet, diam nonummy nibh 
</div> 
<div class="box"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div> 

.box { 
    display: inline-block; 
    width: 20%; 
    margin: 5px; 
    padding:10px; 
    border-top: 5px solid #000000; 
    vertical-align: text-top; 
}

jsfiddle

fonte

2017-02-21 17:58:03 fede

verticale si allinea a lavorare su inline-block

risposta

Problemi correlati