如何使图像与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并使用填充定位文本。您可以通过将类（例如'facebook_icon'）应用于ul。

来使用不同的图像

Answer 2

使用Bootstrap list-inline ..

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

Bootply