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

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

以下是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>

垂直对齐：中间对齐在这里对我没有帮助。当我对
li.main\u navi
使用
display:block
时，子弹图像会消失。
这里有一个图像：

希望它能帮助你

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

如果不求解添加或减去边距
 像这样


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

嗯，您正在使用的图像不能使用
vertical align:middle进行垂直对齐
，因此使用
背景图像
，并将
填充
设置为
li
元素


更新你的css并尝试，我刚刚将线条高度更改为正常，并将高度更改为70

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

}
那一个很好用。谢谢使用背景图像而不是子弹图像有什么缺点吗？
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 */
}

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