Allineare verticalmente il testo accanto a un'immagine?


Risposte:


2253

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>


188
"Dato che è tutto in una riga, è davvero l'immagine che vuoi allineare, non il testo." - No, l'immagine va bene dove si trova. Vogliamo allineare il testo. Non l'immagine. - Ho capito che funziona (in alcuni casi, ad es. Quando non stai usando "float: left" sull'immagine ...), ma è solo bizzarro e non intuitivo che spostare fisicamente il testo nel mezzo verticale dovrebbe invece applicare un attributo all'immagine accanto ad essa.
BrainSlugs83,

35
@ BrainSlug83 Non è certamente bizzarro, ma posso vedere come i nuovi arrivati ​​possano inciampare in questo. Per impostazione predefinita, un'immagine verrà posizionata sulla linea di base del testo. Tutto quello che stai facendo è spostarti dove l'immagine è allegata rispetto al testo. Per quanto riguarda l'utilizzo di float: left, dovresti farlo sul blocco che contiene l'immagine e il testo, o sul testo stesso.
jamesrom,

14
@ BrainSlugs83 Concordato sul fatto che può essere visto come intuitivo. Ci vuole un po 'di cambiamento mentale, perché secondo CSS, ciò che devi fare è centrare l'immagine sul testo. Non il testo dell'immagine.
Greg Pettit,

6
Non funziona se si aumenta la spandimensione del carattere. Vedere la mia risposta .
Mori,

2
Ma se imposti una dimensione dell'immagine su una più piccola (come width:16px;height:16px), puoi vedere l'immagine sarà troppo bassa ...
Matthieu Charbonnier

340

Ecco alcune semplici tecniche per l'allineamento verticale:

Allineamento verticale di una riga: al centro

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>

Allineamento verticale su più righe: in basso

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>

Allineamento verticale su più righe: medio

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

Se è necessario supportare le versioni antiche di IE <= 7

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>

Altezza contenitore variabile vertical-align: middle

Questa soluzione richiede un browser leggermente più moderno rispetto alle altre soluzioni, in quanto utilizza la transform: translateYproprietà. ( 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%);

15
I selettori CSS display:tablee display:table-cellfunzionano 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-.
Banncee

2
display:tablepresenta alcune limitazioni in vari browser (in IE11 max-heightnon 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.
jahu,

97

Cambia il tuo divin 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; }

DEMO


Metodo 2:

div * { margin-top:auto; margin-bottom:auto; }

DEMO


Prova diversi valori di larghezza e altezza sul imge diversi valori di dimensione del carattere sul spane vedrai che rimangono sempre nel mezzo del contenitore.


Per centrare il testo accanto o tra le immagini (orizzontalmente sulla pagina), devi anche aggiungere 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.
CSS

Questo ha funzionato bene. Ho provato ognuna delle altre risposte e, mentre lavoravano fino a un certo punto, non ha funzionato per me. Avevo circa 3 righe di testo da allineare e questa risposta ha funzionato perfettamente. Grazie @Mori
semaj0

87

Devi applicare vertical-align: middlead 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:

confronto di icone centrate

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: topfunziona nello scenario? L'immagine nella domanda è probabilmente più alta del testo e quindi definisce il bordo superiore della casella di linea. vertical-align: topsull'elemento span quindi lo posiziona nella parte superiore della casella della riga.

La principale differenza nel comportamento tra vertical-align: middlee 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).


1
Ho notato lavori migliori e lavori inferiori ma non medi. Fondamentalmente il "mezzo" non è definito a metà strada tra la parte superiore e la parte inferiore. Significa più "quando è più alto del testo, sporgere in entrambe le direzioni allo stesso modo". E qui non è necessario l'allineamento verticale: al centro del testo, solo l'immagine.
Curtis,

61

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 )

Metodo n. 1: tabelle CSS ( FIDDLE ) (IE8 + ( caniuse ))

CSS:

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

Metodo n. 2: elemento pseudo sul contenitore ( FIDDLE ) (IE8 +)

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

Metodo n. 3: Flexbox ( FIDDLE ) ( caniuse )

CSS (il violino sopra contiene prefissi fornitore):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

3
I metodi funzionano bene se l'immagine è più grande (in altezza) del testo. Ma se l'immagine è più piccola, tutti tranne l'ultimo purtroppo falliscono
Thomas,

28

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>

19

Perché devi impostare l' line-heightaltezza del div affinché funzioni


2
Ho provato a impostare l'altezza della linea su 30px e non funziona ancora.
sam,

12

Fondamentalmente, dovrai passare a CSS3.

-moz-box-align: center;
-webkit-box-align: center;

11

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)


2
text-aligne vertical-align(con l'eccezione della sua applicazione su tdelementi per scopi legacy) si intendono specificamente per inlinee inline-blockelementi ( span, img, ecc).
Kevin Peno,

11

Utilizzare line-height:30pxper 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>

11

Un'altra cosa che puoi fare è impostare il testo line-heightsulla dimensione delle immagini all'interno di <div>. Quindi impostare le immagini suvertical-align: middle;

Questo è davvero il modo più semplice.


3
Nota che questo non funziona correttamente se il tuo contenuto è distribuito su più righe.
Ahmad Alfy,

e quindi perché non solo altezza della linea: 100%?
Jean Paul AKA el_vete,

8

Non ho ancora visto una soluzione con marginnessuna di queste risposte, quindi ecco la mia soluzione a questo problema.

Questa soluzione funziona solo se conosci la larghezza della tua immagine.

HTML

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

Il CSS

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

1
Ecco la soluzione esatta. Funziona anche per testi su più righe ... Gli abov non sono adatti a più righe.
efirat,

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


Non aiuta in situazioni in cui la dimensione dell'immagine è sconosciuta o dinamica.
Dan,

6

Scrivi queste proprietà di span

span{
    display:inline-block;
    vertical-align:middle;
}

Usa display:inline-block;Quando usi la vertical-alignproprietà. Queste sono proprietà associate


6

È possibile impostare l'immagine come inline elementusando la displayproprietà

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>


3

Su un pulsante in jQuery mobile, ad esempio, puoi modificarlo un po 'applicando questo stile all'immagine:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

2

Soluzione multilinea:

http://jsfiddle.net/zH58L/6/

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


2

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.


0

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>


2
Ci sono molte buone ragioni per usare i CSS in linea. React: CSS in JS per esempio.
jlyonsmith

0

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>

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

-4

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


6
E se l'altezza dell'immagine è dinamica? Sono fregato :( PS, solo perché esiste una documentazione per CSS non lo rende fastidioso o non intuitivo.
Sam

Intendi dire noioso e intuitivo? Non hai specificato se l'altezza dell'immagine è dinamica nella tua domanda, quindi ho pensato che l'altezza fissa fosse quella con cui avresti aderito.
Strager

2
Sono con Sam su questo. Supponevo che gli oggetti dovevano essere centrati con qualsiasi altezza img risultasse. Penso che potremmo comunque sopportare di rinfrescarci un po '.
Michael Haren,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.