CSS: alineado verticalmente el texto en el elemento li, no funciona

Utilizo una imagen de estilo de lista para elementos li y un texto de una sola línea.CSS: alineado verticalmente el texto en el elemento li, no funciona

enter image description here

pero se ve mal, por lo que desea alinear verticalmente el texto en el centro de la imagen.

Debo usar vertical-align: middle, right? Pero no funcionó para mí.

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

Fuente

2012-04-09 daisy

Una manera satisfactoria para hacer esto (OMI) es no utilizar list-style-imagen, en lugar de utilizar la propiedad de fondo para establecer la "bala" (nota sustituí mi propia imagen de marcador de posición ya que acaba de copiar/pegado de un violín). Su relleno y otras dimensiones variarán según el tamaño de la imagen "viñeta".

Aquí está el violín: 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; 
}

Fuente

2012-04-09 04:08:50

de acuerdo. 'background es un método mucho más confiable + preciso – benesch

No funcionará si el texto tiene varias líneas. – Muhd

Puede tener razón, Muhd, pero solo depende de la definición: "funciona" bien con varias líneas, pero la viñeta siempre está en la parte superior. Sin embargo, este es el estándar para las listas con viñetas. A menos que sea un malentendido, en cuyo caso si haces un fork de mi violín para mostrar el problema, ¡me interesaría verlo! –

-1

Agregar line-height a li. Asegúrese de que es la misma altura que la imagen

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

Fuente

2012-04-09 04:11:13 Ray

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

Esto es lo que yo usaría. No uso alineación vertical y en su lugar uso relleno para mover el texto a donde yo quiera.

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

Fuente

2012-04-09 04:51:05 tastybento

CSS: alineado verticalmente el texto en el elemento li, no funciona

Respuesta

Cuestiones relacionadas