2012-04-09 14 views
5

Io uso un'immagine stile elenco per gli elementi li e un testo a riga singola.CSS: allineare verticalmente il testo nell'elemento li, non funziona

enter image description here

ma sembra male, quindi voglio per allineare verticalmente il testo al centro dell'immagine.

Dovrei usare l'allineamento verticale: medio, giusto? Ma non ha funzionato per me.

<html> 
    <head> 
     <title> This is an demo </title> 
     <style> 
      body { 
       background-color: #464443; 
       color: white; 
      } 
      ul { 
       list-style-image: url('bg.png'); 
      } 

      li { 
       vertical-align: middle; 
      } 

     </style> 
    </head> 

    <body> 
     <ul> 
      <li>abc</li> 
      <li>abc</li> 
      <li>abc</li> 
      <li>abc</li> 
     </ul> 
    </body> 
</html> 

risposta

14

Un modo soddisfacente per fare questo (IMO) è di non usare list-style-image, invece utilizzando la proprietà di sfondo per impostare il "proiettile" (nota ho sostituito la mia immagine segnaposto dato che ho appena copiato/incollato da un violino). Il tuo padding e le altre dimensioni varieranno a seconda della dimensione dell'immagine "bullet".

Ecco il violino: http://jsfiddle.net/huBpa/1/

body { 
    background-color: #464443; 
    color: white; 
} 

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

li { 
    background: url('http://lorempixel.com/output/technics-q-c-32-32-1.jpg') no-repeat; 
    line-height: 32px; 
    vertical-align: middle; 
    padding-left: 40px; 
}​ 
+0

concordato. 'Lo sfondo è un metodo più affidabile + accurato – benesch

+1

Non funziona se il testo è costituito da più righe. – Muhd

+0

Potresti avere ragione, Muhd, ma solo in base alla definizione: "funziona" bene con più linee, ma il proiettile è sempre in alto. Questo è lo standard per gli elenchi puntati, però. A meno che non mi fraintenda, nel qual caso se fai una forchetta del mio violino per mostrare il problema, sarei interessato a vederlo! –

-1

Add line-height a li. Assicurarsi che sia la stessa altezza l'immagine

`

li { 
      vertical-align: middle; 
      line-height: 30px; 
     } 
+0

No: http://jsfiddle.net/huBpa/ –

4

Questo è quello che vorrei utilizzare. Non utilizzo l'allineamento verticale e utilizzo invece il padding per spostare il testo in modo che sia ovunque io voglia che sia.

ul { 
      list-style: none; 
      margin-left: 0; 
      padding-left: 0; 
    } 

    li { 
      padding: 10px 10px 15px 20px; 
      background-image: url(images/arrow.png); 
      background-repeat: no-repeat; 
      background-position: 0px; 
    } 
Problemi correlati