如何让图像与 Bootstrap 导航列表中的文本对齐？

Question

我正在尝试将图像与列表项中的某些文本对齐。我似乎无法让它们对齐（见图）。

如何让文本和图像对齐？我正在使用来自Bootstrap 的默认 CSS 文件，并且我的标记中显示的任何类或元素都没有自定义 CSS。

标记：

<div class="col-md-3">
    <ul class="nav">
        <li><%= link_to "Connect", "#", class: "footer-heading" %></li>
        <li><%= image_tag "facebook.png", size: "32"%><%= link_to "Facebook", "url" %></li>
        <li><%= image_tag "facebook.png", size: "32"%><%= link_to "Facebook", "url" %></li>
    </ul>
</div>

Answer 1

在你的 CSS 中放置：

ul img{ display: inline-block; }

或

ul img{ float: left; }

这应该会导致图像与文本内联显示。

或者将图像作为背景图像添加到 ul 并使用填充定位文本。您可以通过向 ul 应用一个类（例如“facebook_icon”）来使用不同的图像。

Answer 2

使用引导程序list-inline..

<div class="col-md-3">
    <ul class="list-inline">
        <li>-</li>
        <li>-</li>
        <li>-</li>
    </ul>
</div>

Bootply