具有对齐的fontawesome图标的多行listitem

问题描述

我正在使用Twitter引导中的每个列表项制作带有<li>标记和不同FontAwesome图标的项目列表.我试图使列表测试中心垂直，但无法通过这种方式

i am making a list of items with the <li> tag and different FontAwesome icon for each list item in twitter bootstrap. i tried to make the list test center vertically, but cant this way

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

产生了

这是我想要实现的

我该如何实现?

推荐答案

这是您正在查看的内容吗?
http://jsbin.com/iFaWoYa/1/

Is this what you are looking at
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>

这篇关于具有对齐的fontawesome图标的多行listitem的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！