Bootstrap 3對齊堆疊式導航中的圖像和鏈接

我試圖在自舉堆疊導航中放置一個小圖像及其文本，使文本應該垂直對齊到<img>。Bootstrap 3對齊堆疊式導航中的圖像和鏈接

這裏是我的代碼：

HTML

<ul class="nav nav-tabs nav-stacked" style="list-style-type:none;"> 
    <li> 
     <a href="#" class="side-list"><img height="30" width="30" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-jw84XlLxTYJoFlqzKr5AVoFoDjVwNCakmB5Rtv1UIW3VqG2h"> Stacked List 1</a> 
    </li> 
    <li> 
     <a href="#" class="side-list"><img height="30" width="30" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-jw84XlLxTYJoFlqzKr5AVoFoDjVwNCakmB5Rtv1UIW3VqG2h"> Stacked List 2 </a> 
    </li> 
    <li> 
     <a href="#" class="side-list"><img height="30" width="30" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-jw84XlLxTYJoFlqzKr5AVoFoDjVwNCakmB5Rtv1UIW3VqG2h"> Stacked List 3 </a> 
    </li> 
</ul>

CSS

.side-list{ 
    padding-top:15px; 
    padding-bottom:11px; 
    text-align:center; 
    display:block !important; 
    color:#000; 
    font-weight: bold; 
}

來源

2015-08-20 prit4fun

你可以把你堆疊清單文本內<span>

由於：

<ul class="nav nav-tabs nav-stacked" style="list-style-type:none;"> 
    <li> 
     <a href="#" class="side-list"> 
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-jw84XlLxTYJoFlqzKr5AVoFoDjVwNCakmB5Rtv1UIW3VqG2h" height="30" width="30"> <span>Stacked List 1<span></a> 
    </li>....

，寫CSS

由於：

.nav-tabs > li > a > span { 
     display: inline-block; 
     vertical-align: middle; 
    }

這裏的JSFiddle

它會做的伎倆爲您服務。

來源

2015-08-20 13:15:07 vivekkupadhyay

跨度的父必須有顯示：表細胞;爲了達成這個。 – kmike

@kmike請參考我的[** JSFiddle **]（http://jsfiddle.net/vivekkupadhyay/wp830Lyv/1/） – vivekkupadhyay

非常感謝這對我工作。 – prit4fun

以下是解決方案。我只是在文本週圍添加了span標籤，然後將它們製作成display:block。

.side-list { 
 
    padding-top: 15px; 
 
    padding-bottom: 11px; 
 
    text-align: center; 
 
    display: block !important; 
 
    color: #000; 
 
    font-weight: bold; 
 
} 
 
span { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" type="text/css" href="css/style2.css"> 
 
</head> 
 

 
<body> 
 
    <ul class="nav nav-tabs nav-stacked" style="list-style-type:none;"> 
 
    <li> 
 
     <a href="#" class="side-list"> 
 
     <img height="30" width="30" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-jw84XlLxTYJoFlqzKr5AVoFoDjVwNCakmB5Rtv1UIW3VqG2h"> <span>Stacked List 1</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="side-list"> 
 
     <img height="30" width="30" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-jw84XlLxTYJoFlqzKr5AVoFoDjVwNCakmB5Rtv1UIW3VqG2h"><span> Stacked List 2</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="side-list"> 
 
     <img height="30" width="30" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-jw84XlLxTYJoFlqzKr5AVoFoDjVwNCakmB5Rtv1UIW3VqG2h"><span>Stacked List 3 </span> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-08-20 13:18:40 vikrantnegi007

Bootstrap 3對齊堆疊式導航中的圖像和鏈接

回答

相關問題