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

Question

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

继承人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时，子弹图像会消失。 这里有一张图片：

Answer 1

喜欢这个

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

Answer 2

嗯，您使用的图片无法使用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 */
}

Answer 3

希望它会帮助你

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

如果不解决添加或减去保证金 ..

Answer 4

更新你的这个css并尝试，我刚刚将行高改为正常并将高度更改为70

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

}