如何在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--> 

有人可以帮忙吗？

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 jsFiddle

例2 jsFiddle

编辑:使用语义也许是明智的<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示例