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

Posted 2023-03-05

【中文标题】如何使图像与css中的文本一致

【英文标题】：How to have images in line with text in css

【发布时间】：2013-12-22 12:38:59

【问题描述】：

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

有人可以帮忙吗？

【参考方案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;

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>

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

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

Final jsFiddle example

【讨论】：

如果我们在语义上的争论你也错了，现在新的导航标签解决了争论。 css-tricks.com/navigation-in-lists-to-be-or-not-to-be

它没有，不是真的。 <nav> 应该用于导航。这不是导航，它是两个图像和一个地址。我已将答案更新为更具语义化。

没有链接，是的。

你忘记了页脚标签

我省略了footer，因为我不想通过提及使用 shiv / shim 的警告来过度复杂化问题。

【参考方案2】：

最简单的方法是使用<span> 而不是<p>。 <p> 创建一个新段落，该段落退出“独立”。

【讨论】：

为什么不支持更好地解释<p> 和<span> 之间区别的答案？

因为生活在后台流动，不要等到你做某事？当我开始写答案时，没有写到答案。简单的。别担心你会得到你的积分 BenM。

你为什么吵架？本M。你坐在我旁边，现在我的泡泡里发生了什么？请停止这种空洞的讨论。

这不是事实，这只是您的猜测。好的。可以是你的意见。 “更好”这个词也是相对的，所以事实上你应该使用“最好”这个词。

【参考方案3】：

查看这个工作示例here。

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

【参考方案4】：

.content img, .content p float:left 浮动：左/右 - 取决于你想要它在哪里

【参考方案5】：

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

<footer id="footer">

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


#footer display:inline;
#footer address display:inline 

添加了图片的 alt 以帮助残疾和标准。

【参考方案6】：

我发现很多时候我需要调整图像的位置以与文本对齐。您可以通过将文本和图像包装在具有相对位置的 div 中，然后在图像上分配绝对位置来做到这一点。然后您可以添加顶部和左侧边距以调整相对于文本的位置。 https://jsfiddle.net/edhescqn/3/

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"  >
    </a>
</div>

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;