html - 垂直对齐列表中较大元素符号的文本

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; 在这里对我没有帮助。当我对 li.main_navi 使用 display: block 时，子弹图像消失了。这里有一张图片:

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