table 中的 Instagram 图标未与文本内嵌

Question

我正在构建电子邮件签名，因此使用了表格。我已经尝试过显示 inline-block 和 Instagram 图标图像上的相对位置之类的东西，但似乎没有任何效果。

style="width:20px;height:20px;object-fit:cover;

这是我的代码笔：https://codepen.io/alexmciver/pen/zYPJxPW

Answer 1

在包含 Instagram 图标的 span 上使用此样式设置，如下所示

<span style="display: flex; align-items: center;">

</span>

这是您的 html 片段，其中包含内联文本的 Instagram 图标

    <span style="font-family:'Raleway', sans-serif;font-size:14px;font-style:normal;line-height:32px;font-weight:400;color:#ab9e7f;display:inline; padding:0px; display: flex; align-items: center;">
       <img src="https://logowik.com/content/uploads/images/instagram-glyph.jpg" style="width:20px;height:20px;object-fit:cover; margin-right: .25rem" />
        doubledutchdrinks
    </span>

Answer 2

在这些情况下，一种方法是使用来自 sub 或 sup 的标签。将您的图标包裹在 sub 标签内：

<sub style="margin-right: 3px;">
  <img src="https://logowik.com/content/uploads/images/instagram-glyph.jpg" style="width:20px;height:20px;object-fit:cover;">
</sub>

Answer 3

您可以简单地使用 vertical-align 对齐此项

<img src="https://logowik.com/content/uploads/images/instagram-glyph.jpg" style="width:20px;height:20px;object-fit:cover;vertical-align: middle;">

table 中的 Instagram 图标未与文本内嵌

Instagram icon not inline with text in table

html

css

css-tables