如何將列表文本對齊

我對「li」元素使用圖片。問題是文本顯示在image.how下，以便將文本與列表圖像的中心對齊？如何將列表文本對齊

如下所示image http://www.freeimagehosting.net/uploads/c0e4ae8608.jpg

CSS：

ul.mark{ 
list-style-image: url('bullet1.jpg'); 
}

HTML：

<ul class='mark'> 
    ... 
</ul>

來源

2010-01-06 ArK

你是怎麼做到的？通過'list-style-image'或通過'background-image'？ – Gumbo 2010-01-06 10:01:43

list-style-image – ArK 2010-01-06 10:09:43

嘗試使用背景圖片來代替。然後設置相對填充/邊距，這應該做的伎倆。

但是，也要考慮如果用戶沒有啓用圖像，可能會導致可用性問題。

來源

2010-01-06 10:18:24 chrr

您可以使用:before將圖像放在<li>元素的前面。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>Name of the page</title> 
     <meta http-equiv="content-type" content="text/html; charset=utf8"> 
     <style type="text/css"> 
      ul { 
       list-style: none; 
      } 
      li { } 
      li:before { 
       display: inline-block; 
       vertical-align: middle; 
       height: 64px; 
       width: 64px; 
       content: ' '; 
       background-image: url(bullet_64.png); 
      } 

     </style> 
    </head> 
    <body> 
     <ul> 
      <li>First</li> 
      <li>Second</li> 
      <li>Third</li> 
     </ul> 
    </body> 
</html>

然後你可以給它添加一個邊距，如果你需要把它放在左邊，那裏通常顯示項目符號。

這應該適用於所有現代瀏覽器，以及IE8。

來源

2010-01-06 10:27:35 Atli

但遺憾的是，在IE6和7中不起作用 - 因此，現在任何主流網站都不存在這個問題。 – 2010-01-06 12:04:09

是的。讓它留給微軟讓我們等待11年以上的時間來支持這種基本的東西。 *（Grrrr）* - 但那不會阻止我。我早就停止瞭解決IE問題的方法。如果人們想使用破碎的瀏覽器，讓他們看到破損的頁面。 *（幸運的是，我是個體經營的xD）* – Atli 2010-01-06 19:09:57

如何將列表文本對齊

回答

相關問題