如何让图像符合CSS中的文字 [英] How to have images in line with text in css

问题描述

我希望将两个脸书和推特图片与文字一致，以便所有内容在页脚中与彼此相符

目前我的页脚代码是

HTML -

 < div class =footer content> 
 
< img src =图片/ facebook.png> 
< img src =图片/ twitter.png> 
 
< p>地址行1 
地址行2 
地址行3 
 
< / p> 
 
< / div> <！ - 页尾结束 - > 
  

任何人都可以帮忙吗？

解决方案

< p> 标签是块级元素。使用一个内联元素，比如< span> ：
$ b

 < div class =footer content> 
< img src =图片/ facebook.png/> 
< img src =图片/ twitter.png> 
< span> 
地址行1 
地址行2 
地址行3 
< / span> 
< / div> 
  

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

  .footer.content> img，
 .footer.content> p {
 display：inline-block; 
} 
  

示例1 jsFiddle

示例2 jsFiddle

编辑：明智地使用< address> ，而不是< span> 。例如：
$ b

 < div class =footer content> 
< img src =图片/ facebook.png/> 
< img src =图片/ twitter.png> 
<地址> 
地址行1 
地址行2 
地址行3 
< / address> 
< / div> 
  

因为< address> 也是块级元素，你需要包含如下正确的CSS：

.content> img，
.footer.content>地址{
display：inline-block;
}

最终jsFiddle示例

I'm creating the footer of my website using html and css.

I want to have the two facebook and twitter images in line with the text so that everything in the footer is in line with eachother

At the moment my footer code is

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

Can anyone help please?

解决方案

<p> tags are block-level elements. Use an inline element such as <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>

Alternatively, if you're able to use CSS, you can define both elements as inline-block:

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

Example 1 jsFiddle

Example 2 jsFiddle

EDIT: It might also be wise for semantics to use <address>, rather than <span>. For example:

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

Since <address> is also a block-level element, you'll need to include the correct CSS as follows:

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

Final jsFiddle example

这篇关于如何让图像符合CSS中的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！