Allineare verticalmente il testo accanto a un'immagine?

StackOverflow https://stackoverflow.com/questions/489340

  •  20-08-2019
  •  | 
  •  

Domanda

Perché vertical-align: middle non funziona? Eppure, vertical-align: top funziona . 

span{
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

È stato utile?

Soluzione

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>

Altri suggerimenti

Ecco alcune semplici tecniche per l'allineamento verticale:

Allineamento verticale di una riga: medio

Questo è semplice: 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

Per fare in modo che 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 proprietà transform: translateY. ( 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%);

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

DEMO

Metodo 2: 

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

DEMO

Prova diversi valori di larghezza e altezza su img e diversi valori di dimensione del carattere su span e vedrai che rimangono sempre al centro del contenitore.

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:

confronto di icone centrate

A sinistra, il testo non è allineato, a destra è come mostrato sopra. Una demo live è disponibile in questo articolo su vertical-align .

Qualcuno ha parlato del motivo per cui vertical-align: top funziona nello scenario? L'immagine nella domanda è probabilmente più alta del testo e quindi definisce il bordo superiore della casella. top sull'elemento span quindi lo posiziona nella parte superiore della casella della riga.

La principale differenza nel comportamento tra <=> e <=> è che il primo sposta gli elementi rispetto alla linea di base del riquadro (che viene posizionata ovunque necessario per soddisfare tutti gli allineamenti verticali e quindi sembra piuttosto imprevedibile ) e il secondo relativo ai limiti esterni della casella (che è più tangibile).

La tecnica utilizzata nella risposta accettata funziona solo per il testo a riga singola ( demo ) , ma non testo multilinea ( demo ) - come indicato qui.

Se qualcuno deve centrare verticalmente il testo con più righe su un'immagine, ecco alcuni modi (I 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 ) (< a href = "http://caniuse.com/flexbox" rel = "noreferrer"> caniuse )

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 in FF: 

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

Perché devi impostare line-height all'altezza del div affinché funzioni

Fondamentalmente, dovrai passare a CSS3. 

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

Per la cronologia, allineamento " comandi " non dovrebbe 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.

CSS divide i tag HTML in due gruppi: in linea e a livello di blocco. Cerca & Quot; blocco css vs inline & Quot; e un grande articolo si presenta ...

http://www.webdesignfromscratch.com/html-css / css-block-and-inline /

(Comprendere i principi CSS di base è una chiave per non essere così fastidioso)

Usa 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 su vertical-align: middle;

Questo è davvero il modo più semplice.

Non ho ancora visto una soluzione con margin in nessuna 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;
}

background:url(../images/red_bullet.jpg) left 3px no-repeat;

In genere utilizzo 3px al posto di top. Aumentando / diminuendo quel valore, l'immagine può essere cambiata all'altezza richiesta.

Scrivi queste proprietà dell'intervallo 

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

Usa display:inline-block; Quando usi vertical-align proprietà. Quelle sono proprietà associate

Puoi impostare l'immagine come inline element usando 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>

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

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

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 +

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 modellare e regolare le dimensioni dell'immagine e del contenitore della tabella per farlo funzionare come desideri. Godetevi.

Innanzitutto CSS incorporato non è affatto raccomandato, rovina davvero il tuo HTML.

Per allineare immagine e intervallo, puoi semplicemente fare 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>

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top