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

How to have images in line with text in css

提问by user3046451

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

我正在使用 html 和 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

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

At the moment my footer code is

目前我的页脚代码是

HTML -

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?

有人可以帮忙吗？

回答by BenM

<p>tags are block-level elements. Use an inline element such as <span>:

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

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

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

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

Example 1 jsFiddle

示例 1 jsFiddle

Example 2 jsFiddle

示例 2 jsFiddle

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

编辑：语义使用<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>

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

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

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

Final jsFiddle example

最终的 jsFiddle 示例

回答by Aleksandr Golubovskij

.content img, .content p { float:left }float: left/right - depending where you want it to be

.content img, .content p { float:left }浮动：左/右 - 取决于你想要的位置

回答by greko

The simplest way is to use <span>instead of <p>. <p>makes a new paragraph which is quit "independent".

最简单的方法是使用<span>代替<p>。<p>制作一个新的段落，退出“独立”。

回答by Juan

If you want to use new tags specific for footer and address this is my example:

如果您想使用特定于页脚和地址的新标签，这是我的示例：

<footer id="footer">

    <span><img src="Images/facebook.png" alt="some text" /></span>
        <span> <img src="Images/twitter.png" alt="some text"/></span>
                <span>
                    <address>
                        Address line 1
                        Address line 2
                    Address line 3
                    </address>    
            </span>
</footer>


#footer {display:inline;}
#footer address {display:inline }

The alt to images was added to help with disability and standards.

添加了图像的替代项以帮助解决残疾和标准问题。

回答by Bala Varadarajan

Check out this working example here.

在此处查看此工作示例。

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

回答by Stephen Ainsworth

I find a lot of the time I need to adjust the position of the image to align with the text. You can do this by wrapping the text and image in a div with position relative and then assigning position absolute on the image. Then you ca add top and margin left to adjust the position relative to the text. https://jsfiddle.net/edhescqn/3/

我发现很多时候我需要调整图像的位置以与文本对齐。您可以通过将文本和图像包装在具有相对位置的 div 中，然后在图像上分配绝对位置来实现。然后你可以添加 top 和 margin left 来调整相对于文本的位置。https://jsfiddle.net/edhescqn/3/

HTML:

HTML：

<div class="amazonLink">
    <a href="#">
        <div class="amazonLink__text">Buy Now on Amazon</div>
        <img class="amazonLink__image" 
            src="http://cdn2.iconmonstr.com/wp-content/assets/preview/2016/240/iconmonstr-amazon-1.png" width="24px" height="24px">
    </a>
</div>

CSS:

CSS：

.amazonLink {
  position: relative;
  margin-top: 10px;
}

.amazonLink__text {
  display: inline-block;
  line-height: 40px;
}

.amazonLink__image {
  display: inline-block;
  position: absolute;
  top: 8px;
  margin-left: 5px;
}