CSS: pionowe wyrównanie tekstu w li, nie działa

Używam obrazka stylu listowego dla elementów li oraz tekstu pojedynczego wiersza.CSS: pionowe wyrównanie tekstu w li, nie działa

enter image description here

Ale wygląda źle, więc chcę pionowo wyrównać tekst na środku obrazu.

Powinienem użyć vertical-align: middle, right? Ale nie zadziałało to dla mnie.

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

Źródło

2012-04-09 daisy

zadowalający sposób to zrobić (IMO) jest, aby nie używać list-style-image, zamiast przy użyciu właściwości tła ustawić „pocisk” (zauważ, że podstawione własne zastępczy obrazu, ponieważ po prostu kopiowane/wklejony z skrzypiec). Twoje dopełnienie i inne wymiary będą się różnić w zależności od rozmiaru obrazu "punktora".

Oto skrzypce: 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; 
}

Źródło

2012-04-09 04:08:50

uzgodniona. 'tło jest dużo bardziej niezawodną + dokładną metodą. – benesch

Nie będzie działać, jeśli tekst ma wiele linii. – Muhd

Możesz mieć rację, Muhd, ale tylko w zależności od definicji: "działa" dobrze z wieloma liniami, ale kula jest zawsze na górze. Jest to jednak w dużym stopniu standardem list wypunktowanych. O ile się nie mylę, w takim przypadku, jeśli rozwiążesz moje skrzypce, aby pokazać problem, byłbym zainteresowany, aby to zobaczyć! –

-1

Add line-height Li. Upewnij się, że jest taka sama jak wysokość obrazu

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

Źródło

2012-04-09 04:11:13 Ray

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

To jest to, co chciałbym użyć. Nie używam wyrównywania w pionie i zamiast tego używam dopełnienia, aby przesuwać tekst, aby był tam, gdzie chcę.

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

Źródło

2012-04-09 04:51:05 tastybento

CSS: pionowe wyrównanie tekstu w li, nie działa

Odpowiedz

Powiązane problemy