在文字左侧添加图片

Question

我需要为内容创建一个页面的内容，该页面的内容句子的左侧有一个小图标图像。

我认为这很容易弄清楚，但是我无法使文本与图像的底部对齐。请参阅所附图像，以了解我要弄清楚的示例。这是我一直在使用的代码：

<p>
<img src="http://www.example.com/smiley.jpg" alt="Smiley face image" 
style="float:left; width:42px; height:42px;"><span style="vertical-align:bottom">This 
is one line of text with image on the left side</span>
</p>

有什么建议吗？

Answer 1

您可以使用CSS flexbox实现这一点，在段落中添加display: flex，并对齐文本元素align-self: flex-end;。了解有关Flexbox at MDN的更多信息。

float如今被认为是不好的做法，因为有更好的选择。

.text {
  align-self: flex-end;
}

.image {
  width: 42px;
  height: 42px;
}

.paragraph {
  display: flex;
}

<p class="paragraph">
  <img src="https://i.imgur.com/OxHKeTw.gif" alt="Smiley face image" class="image"><span class="text">This is one line of text with image on the left side</span>
</p>

Answer 2

您需要使用float:left吗？为什么不将图像作为inline-block插入到行首？您可以根据需要添加填充，以使其与文本开头分开。

<p><img src="http://placekitten.com/42/42" alt="" 
style="display:inline-block; padding-right:10px; width:42px; height:42px;">This 
is one line of text with image on the left side</p>

Answer 3

另一种方法是使用职位

<p style="position: relative; overflow: auto">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" alt="Smiley face image"
     style="float:left; width:42px; height:42px;">

这是一行文字，图片在左侧