在不影响“线条高度”的情况下在段落中添加表情符号

Question

如何在不影响line-height的情况下在段落中插入一个表情符号，而不管这个表情符号有多大？即。像这样：

​

我得到的最接近的是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>

​