html – 如何在css中使图像与文本一致

前端之家收集整理的这篇文章主要介绍了html – 如何在css中使图像与文本一致前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用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-->

有人可以帮忙吗?

解决方法

< p为H.标签是块级元素.使用内联元素,例如< 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,则可以将两个元素定义为内联块:

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

Example 1 jsFiddle

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

由于<地址>也是一个块级元素,您需要包含正确的CSS,如下所示:

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

Final jsFiddle example

猜你在找的HTML相关文章