verticaly align text with larger bullets in a list

Question

How can I align my text vertically. I found similar questions, but none of them solves my problem.

Heres the 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>

and the concerning 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;
}

The vertical-align: middle; does not help me here. When I use display: block for the li.main_navi the bullet-images disapear. Here you have an image:

Answer 1

Like this

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