6

<li>Twitterブートストラップで、リスト項目ごとにタグと異なる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>

生産した

点灯 1

これが私が達成したいことです

リスト

どうすればこれを達成できますか?

4

3 に答える 3

5

これはあなたが見ているものですか
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>
于 2013-10-07T07:40:37.263 に答える
1

<a> タグに「position:relative」、<i> タグに「position:absolute」を設定できます。次に、「padding-left: <アイコンのサイズ>」を <a> に追加し、「display: block」または「display: inline-block」を追加します。これは、「position」がないと機能しないためです。また、「上: 0」と「左: 0」をアイコンにして右に配置することもできます。

于 2013-10-07T07:20:17.340 に答える