Question

我正在尝试将一个小图片及其文字放在引导堆叠导航中，这样文字应该垂直对齐<img>。

这是我的代码：

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

Answer 1

您可以将堆叠列表文字放在<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

它会为你做到这一点。

Answer 2

这是解决方案。我刚刚在文本周围添加了span标记，然后将它们设为display:block。

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap 3在堆叠导航中对齐图像和链接

2 个答案: