具有对齐的fontawesome图标的多行列表项目

Question

我正在<li>为twitter bootstrap中的每个列表项创建带有标记和不同FontAwesome图标的项目列表.我试图垂直制作列表测试中心,但不能这样

<ul class="middle">
<li>
 <a href="#">
  <i class="icon-cog icon-2x"></i>
   very long multiline item one</a>
</li>
<li>
 <a href="#">
  <i class="icon-pencil icon-2x"></i>
    very long multiline item two
 </a>
</li>
</ul>

哪个产生了

这就是我想要实现的目标

我怎样才能实现这一目标？

Answer 1

这是你在看的吗
http://jsbin.com/iFaWoYa/1/

ul{list-style:none; width:100px;}
ul li {position:relative; margin:0 0 20px 0}
ul li a{position:relative; display:inline-block; padding-left:35px;}
ul li i{position:absolute; padding-right:25px; top:30%;}


<ul class="middle">
  <li>
    <i class="icon-cog icon-2x"></i> <a href="#">very long multiline item one</a>
  </li>
  <li>
    <i class="icon-pencil icon-2x"></i> <a href="#">very long multiline item two</a>
  </li>
</ul>