将文本与列表中较大的项目符号垂直对齐答案

【问题标题】：verticaly align text with larger bullets in a list将文本与列表中较大的项目符号垂直对齐
【发布时间】：2014-02-05 10:54:52
【问题描述】：

如何垂直对齐文本。我发现了类似的问题，但没有一个能解决我的问题。

这是 HTML：

<ul id="main_navi">
   <li class="main_navi">
      <a class="main_navi_link" href="#">nav_1</a>
   </li>
   <li class="main_navi">
      <a class="main_navi_link" href="#">nav_2</a>
   </li>
   <li class="main_navi">
      <a class="main_navi_link" href="#">nav_3</a>
   </li>                                 
</ul>

以及相关的css：

ul#main_navi li:nth-child(1){
    list-style-image:url(../pics/main_edit_folder_area.png);
}
ul#main_navi li:nth-child(2){
    list-style-image:url(../pics/main_search_data_area.png);
}

ul#main_navi li:nth-child(3){
    list-style-image:url(../pics/main_admin_area.png);
}

li.main_navi{
    line-height: 70px;
    vertical-align: middle;
    width: 200px;
}

vertical-align: middle; 在这里对我没有帮助。当我将display: block 用于li.main_navi 时，子弹图像消失了。这里有一张图片：

【问题讨论】：

标签： html css list vertical-alignment

【解决方案1】：

希望对你有帮助

li.main_navi a{ line-height:70px; }

如果不解决添加或减去边距..

【讨论】：

【解决方案2】：

这样

demo

css

ul#main_navi li{
list-style-type:none;
}
ul#main_navi li:nth-child(1){
    background-image:url("https://cdn2.iconfinder.com/data/icons/snipicons/500/pencil-48.png");
    background-repeat:no-repeat;

    background-position:-2px 10px;
    padding:0 0 0 50px;


}
ul#main_navi li:nth-child(2){
    list-style-image:url(../pics/main_search_data_area.png);
}

ul#main_navi li:nth-child(3){
    list-style-image:url(../pics/main_admin_area.png);

}

li.main_navi{
    line-height: 70px;
    vertical-align: middle;
    width: 200px;
}

【讨论】：

那个很好用。谢谢。使用背景图像而不是项目符号图像有什么缺点吗？

【解决方案3】：

好吧，您使用的图像无法使用vertical-align: middle; 垂直对齐，因此请使用background-image 并将padding 设置为li 元素。

Demo

ul {
    list-style-type: none;
}

ul#main_navi li:nth-child(1){
   background:url(#); /* Add these properties here and get rid of list-style-image */
   background-repeat: no-repeat;
}

li.main_navi{
    line-height: 70px;
    width: 200px;
    padding-left: 100px; /* Make sure you use this */
}

【讨论】：

【解决方案4】：

更新你的这个 css 并尝试，我刚刚将 line-height 更改为 normal 并将 height 更改为 70

li.main_navi {
height: 70px;
line-height: normal;
vertical-align: middle;
width: 200px;

}

【讨论】：