Perché non vertical-align: middle
funziona? Eppure, vertical-align: top
fa il lavoro.
span{
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>Doesn't work.</span>
</div>
Perché non vertical-align: middle
funziona? Eppure, vertical-align: top
fa il lavoro.
span{
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>Doesn't work.</span>
</div>
Risposte:
In realtà, in questo caso è abbastanza semplice: applicare l'allineamento verticale all'immagine. Dal momento che è tutto in una riga, è davvero l'immagine che vuoi allineare, non il testo.
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
Testato in FF3.
Ora puoi usare flexbox per questo tipo di layout.
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
span
dimensione del carattere. Vedere la mia risposta .
width:16px;height:16px
), puoi vedere l'immagine sarà troppo bassa ...
Ecco alcune semplici tecniche per l'allineamento verticale:
Questo è facile: imposta l'altezza della linea dell'elemento di testo su uguale a quella del contenitore
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Posiziona assolutamente un div interno rispetto al suo contenitore
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
Affinché questo funzioni correttamente su tutta la linea, dovrai hackerare un po 'il CSS. Fortunatamente, esiste un bug di IE che funziona a nostro favore. Impostando top:50%
sul contenitore e top:-50%
sul div interno, è possibile ottenere lo stesso risultato. Possiamo combinare i due usando un'altra funzionalità che IE non supporta: selettori CSS avanzati.
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>
Questa soluzione richiede un browser leggermente più moderno rispetto alle altre soluzioni, in quanto utilizza la transform: translateY
proprietà. ( http://caniuse.com/#feat=transforms2d )
L'applicazione delle seguenti 3 righe di CSS a un elemento lo centrerà verticalmente all'interno del suo genitore indipendentemente dall'altezza dell'elemento genitore:
position: relative;
top: 50%;
transform: translateY(-50%);
display:table
e display:table-cell
funzionano alla grande, tranne, ovviamente, in IE7 e precedenti. Dopo avermi strappato i capelli per diverse ore, ho deciso che non avevo davvero bisogno di avere a che fare con chiunque avesse ancora usato IE7-.
display:table
presenta alcune limitazioni in vari browser (in IE11 max-height
non funziona se l'elemento si trova all'interno di una cella di tabella), quindi in alcuni casi limite non è una buona idea allineare verticalmente usando le celle di tabella.
Cambia il tuo div
in un contenitore flessibile:
div { display:flex; }
Ora ci sono due metodi per centrare gli allineamenti per tutto il contenuto:
Metodo 1:
div { align-items:center; }
Metodo 2:
div * { margin-top:auto; margin-bottom:auto; }
Prova diversi valori di larghezza e altezza sul img
e diversi valori di dimensione del carattere sul span
e vedrai che rimangono sempre nel mezzo del contenitore.
justify-content: center;
e per spaziare (senza usare i tag <br/>) potresti anche voler inserire a padding: 1em;
. Ottimo aggiornamento per noi moderni sviluppatori di browser.
Devi applicare vertical-align: middle
ad entrambi gli elementi per centrarlo perfettamente.
<div>
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
<span style="vertical-align:middle">Perfectly centered</span>
</div>
La risposta accettata centra l'icona attorno alla metà dell'altezza x del testo accanto ad essa (come definito nelle specifiche CSS ). Che potrebbe essere abbastanza buono ma può sembrare un po 'fuori posto, se il testo ha ascendenti o discendenti che si stagliano proprio in alto o in basso:
A sinistra, il testo non è allineato, a destra è come mostrato sopra. Una demo live può essere trovata in questo articolo su vertical-align .
Qualcuno ha parlato del perché vertical-align: top
funziona nello scenario? L'immagine nella domanda è probabilmente più alta del testo e quindi definisce il bordo superiore della casella di linea. vertical-align: top
sull'elemento span quindi lo posiziona nella parte superiore della casella della riga.
La principale differenza nel comportamento tra vertical-align: middle
e top
è che il primo sposta gli elementi rispetto alla linea di base della scatola (che viene posizionata dove necessario per soddisfare tutti gli allineamenti verticali e quindi sembra piuttosto imprevedibile ) e la seconda relativa ai limiti esterni della scatola di linea (che è più tangibile).
La tecnica utilizzata nella risposta accettata funziona solo per il testo a riga singola ( demo ), ma non per il testo a più righe ( demo ), come indicato qui.
Se qualcuno ha bisogno di centrare verticalmente il testo a più righe su un'immagine, ecco alcuni modi (Metodi 1 e 2 ispirati a questo articolo CSS-Tricks )
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
CSS:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
CSS (il violino sopra contiene prefissi fornitore):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
Questo codice funziona in IE e FF:
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
Per la cronaca, i "comandi" di allineamento non dovrebbero funzionare su uno SPAN, perché è un tag in linea , non un tag a livello di blocco . Cose come allineamento, margine, riempimento, ecc. Non funzioneranno su un tag in linea perché il punto di inline non è quello di interrompere il flusso di testo.
Il CSS divide i tag HTML in due gruppi: in linea e a livello di blocco. Cerca "css block vs inline" e compare un ottimo articolo ...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Comprendere i principi CSS di base è la chiave per non essere così fastidioso)
text-align
e vertical-align
(con l'eccezione della sua applicazione su td
elementi per scopi legacy) si intendono specificamente per inline
e inline-block
elementi ( span
, img
, ecc).
Utilizzare line-height:30px
per l'intervallo in modo che il testo sia allineato con l'immagine:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Un'altra cosa che puoi fare è impostare il testo line-height
sulla dimensione delle immagini all'interno di <div>
. Quindi impostare le immagini suvertical-align: middle;
Questo è davvero il modo più semplice.
Non ho ancora visto una soluzione con margin
nessuna di queste risposte, quindi ecco la mia soluzione a questo problema.
Questa soluzione funziona solo se conosci la larghezza della tua immagine.
<div>
<img src="https://placehold.it/80x80">
<span>This is my very long text what should align. This is my very long text what should align.</span>
</div>
div {
overflow:hidden;
}
img {
width:80px
margin-right:20px;
display:inline-block;
vertical-align:middle;
}
span {
width:100%;
margin-right:-100px;
padding-right:100px;
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
background:url(../images/red_bullet.jpg) left 3px no-repeat;
In genere uso 3px al posto di top
. Aumentando / diminuendo quel valore, l'immagine può essere cambiata all'altezza richiesta.
È possibile impostare l'immagine come inline element
usando la display
proprietà
<div>
<img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
<span style="vertical-align: middle; display: inline;">Works.</span>
</div>
Soluzione multilinea:
<div style="display:table;width:30px;height:160px;">
<img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
<div style="display:table-cell;height:30px;vertical-align:middle">
Multiline text centered vertically
</div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->
Funziona con tutti i browser e ie9 +
Può essere fonte di confusione, sono d'accordo. Prova a utilizzare le funzionalità della tabella. Uso questo semplice trucco CSS per posizionare i modali al centro della pagina web. Ha un ampio supporto per il browser:
<div class="table">
<div class="cell">
<img src="..." alt="..." />
<span>It works now</span>
</div>
</div>
e parte CSS:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
Nota che devi personalizzare e regolare le dimensioni dell'immagine e del contenitore della tabella per farlo funzionare come desideri. Godere.
In primo luogo il CSS inline non è affatto raccomandato, rovina davvero il tuo HTML.
Per allineare immagine e intervallo, puoi semplicemente farlo vertical-align:middle
.
.align-middle {
vertical-align: middle;
}
<div>
<img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
<span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>
Non sono sicuro del motivo per cui non viene visualizzato sul browser di navigazione, ma di solito utilizzo uno snippet come questo quando provo a visualizzare un'intestazione con un'immagine e un testo centrato, spero che sia di aiuto!
https://output.jsbin.com/jeqorahupo
<hgroup style="display:block; text-align:center; vertical-align:middle; margin:inherit auto; padding:inherit auto; max-height:inherit">
<header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; 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;">
<image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
http://lipsum.org</header>
</hgroup>
<!DOCTYPE html>
<html>
<head>
<style>
.block-system-branding-block {
flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
justify-content: center;
align-items: center;
}
.flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
width: 300px;
margin: 10px;
text-align: left;
line-height: 20px;
font-size: 16px;
}
.flex-containercolumn > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block-
system-branding-block">
<div class="flex-containerrow">
<div>
<a href="/" rel="home" class="site-logo">
<img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
<div class="site-name ">
<a href="/" title="Home" rel="home">This is my sitename</a>
</div>
<div class="site-slogan "><span>Department of Test | Ministry of Test |
TGoII</span></div>
</div></div>
</div>
</div>
</body>
</html>
Probabilmente vuoi questo:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
Come altri hanno suggerito, prova vertical-align
l'immagine:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS non è fastidioso. Semplicemente non leggi la documentazione . ; P
vertical-align