如何使图像与css中的文本一致

Question

我正在使用 html 和 css 创建我网站的页脚。

我想让两个 facebook 和 twitter 图像与文本一致，以便页脚中的所有内容彼此一致

目前我的页脚代码是

HTML -

 <div class="footer content">

        <img src="Images/facebook.png">
        <img src="Images/twitter.png">

        <p> Address line 1
                        Address line 2
                        Address line 3

  </p>

</div> <!--end of footer-->

有人可以帮忙吗？

原文由 user3046451 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<p> 标签是块级元素。使用内联元素，例如 <span> ：

 <div class="footer content">
    <img src="Images/facebook.png" />
    <img src="Images/twitter.png">
    <span>
        Address line 1
        Address line 2
        Address line 3
    </span>
</div>

或者，如果您能够使用 CSS，则可以将这两个元素定义为 inline-block ：

 .footer.content > img,
.footer.content > p {
    display: inline-block;
}

示例 1

示例 2

编辑： 语义使用 <address> 可能也是明智的，而不是 <span> 。例如：

 <div class="footer content">
    <img src="Images/facebook.png" />
    <img src="Images/twitter.png">
    <address>
        Address line 1
        Address line 2
        Address line 3
    </address>
</div>

由于 <address> 也是一个块级元素，您需要包含正确的 CSS，如下所示：

 .footer.content > img,
.footer.content > address {
    display: inline-block;
}

最终的 jsFiddle 示例

原文由 BenM 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在此处 查看此工作示例。

 .channels li {
    float: left;
    margin-left: 0.625em;
}

原文由 Bala Varadarajan 发布，翻译遵循 CC BY-SA 3.0 许可协议