问

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

廖蓉以发布于 2023-02-12 17:10

html

css

facebook

twitter

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

我希望将两个facebook和twitter图像与文本一致,以便页脚中的所有内容与彼此一致

目前我的页脚代码是

HTML -



        
        

         Address line 1
                        Address line 2
                        Address line 3

有人可以帮忙吗？

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示例


                
                    2023-02-12 17:13  回答
                       林健铭丶



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签