css - 带有对齐的字体真棒图标的多行列表项

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>

Answer 2

尝试pull-left在图标上使用：

<li>
 <a href="#">
  <i class="icon-cog icon-2x pull-left"></i>
   very long multiline item one</a>
</li>

演示： http ://bootply.com/86079

Answer 3

您可以为 <a> 标签设置“position:relative”，为 <i> 设置“position:absolute”。然后将 "padding-left: <size of your icon>" 添加到 <a> 和 "display: block" 或 "display: inline-block" 因为没有 "position" 它将无法工作。也许“top：0”和“left：0”到图标以进行右侧定位；