css - testo - vertical align image in table cell




Allinea verticalmente il testo accanto a un'immagine? (14)

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

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

È possibile impostare l'immagine come inline element utilizzando la proprietà di display

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


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 sullo span e vedrai che rimangono sempre nel mezzo del contenitore.


Ecco alcune semplici tecniche per l'allineamento verticale:

Allineamento verticale su una riga: medio

Questo è semplice: imposta l'altezza della linea dell'elemento di testo 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: inferiore

Assolutamente posiziona un div interno relativo 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 linee multiple: 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 versioni precedenti di IE <= 7

Per far sì che tutto funzioni correttamente su tutta la linea, dovrai unire un po 'il CSS. Fortunatamente, c'è un bug di IE che funziona a nostro favore. Impostazione top:50% sul contenitore e top:-50% sul div interno, è possibile ottenere lo stesso risultato. Possiamo combinare i due utilizzando un'altra caratteristica 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 verticale-allineamento: medio

Questa soluzione richiede un browser leggermente più moderno rispetto alle altre soluzioni, in quanto utilizza la transform: translateY proprietà transform: translateY . ( http://caniuse.com/#feat=transforms2d )

L'applicazione delle seguenti 3 righe di CSS a un elemento verrà centrata verticalmente all'interno del relativo genitore indipendentemente dall'altezza dell'elemento genitore:

position: relative;
top: 50%;
transform: translateY(-50%);

Fondamentalmente, devi scendere al CSS3.

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

In realtà, in questo caso è abbastanza semplice: applica l'allineamento verticale all'immagine. Poiché è 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>


La tecnica utilizzata nella risposta accettata funziona solo per testo a riga singola ( demo ), ma non testo a più righe ( demo ), come indicato qui.

Se qualcuno ha bisogno di centrare verticalmente il testo a più linee su un'immagine, qui ci sono alcuni modi (Metodi 1 e 2 ispirati da questo articolo di CSS-Tricks )

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

CSS:

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

Metodo 2: Pseudo elemento 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 3: Flexbox ( FIDDLE ) ( caniuse )

CSS (il violino di cui sopra contiene prefissi del venditore):

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

Per la cronaca, i "comandi" di allineamento non dovrebbero funzionare su uno SPAN, perché si tratta di un tag in linea , non di 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 del testo.

Il CSS divide i tag HTML in due gruppi: in-line e block-level. Cerca "css block vs inline" e un grande articolo appare ...

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

(Capire i principi del core CSS è una chiave per non essere così fastidioso)


Perché devi impostare l' line-height della line-height all'altezza del div perché funzioni


Può essere fonte di confusione, sono d'accordo. Prova a utilizzare le funzionalità del tavolo. Io uso questo semplice trucco CSS per posizionare le modali al centro della pagina web. Ha un ampio supporto per 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 adattare le dimensioni del contenitore immagine e tabella per farlo funzionare come desideri. Godere.


Questo codice funziona in IE così come in FF:

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

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 in tutti i browser e vale a dire9 +


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

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

Usa line-height:30px per lo span 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>

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

Generalmente uso 3px al posto di top . Aumentando / diminuendo quel valore, l'immagine può essere cambiata all'altezza desiderata.





vertical-alignment