在段落中放置表情符号而不影响“行高”

Question

如何在段落中插入表情，无论line-height表情有多大，都不影响内容？IE。喜欢：

我得到的最接近的是 或position: absolute，vertical-align: text-top但没有一个能完成这项工作。

p img {
    height: 35px;
    display: inline;
}
#one img {
    vertical-align: text-top;
}
#two img {
    position: absolute;
}

<p id="one">Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>
<p id="two">Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

我知道这里和这里有类似的问题，但是两者都已经过时并且没有正确的答案。

Answer 1

您可以使用

margin-top: [something];
margin-bottom: [something];
vertical-align: middle;

哪里。[something]​(containerLineHeight - imageHeight) / 2

margin: [something] 0另请注意，如果没有左右边距，则可以使用。

例如，由于图像有height: 35px，假设容器有line-height: 20px，

margin: -7.5px 0; // (20px - 35px) / 2

p {
  line-height: 20px;
}
p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -7.5px 0;
}

<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

请注意，使用上面的值7.5px不会有什么坏处，因为vertical-align: middle. 因此，你可以使用类似的东西

margin: -1000000px 0;

p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -1000000px 0;
}

<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

或者，您可以使用百分比，该百分比将根据生成的框的包含块的宽度进行计算。

因此，假设容器的宽度大于图像的高度，margin: -50% 0应该就足够了。

p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -50% 0;
}

<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

为了更安全，您还可以使用类似的东西margin: -1000000% 0

p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -1000000% 0;
}

<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>