如何在不影响段落内容的情况下插入表情符号line-height
不管表情有多大? IE。喜欢:
我得到的最接近的是position: absolute
or 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>
我知道类似的问题here and here,然而两者都已经过时并且没有正确的答案。
您可以使用
margin-top: [something];
margin-bottom: [something];
vertical-align: middle;
Where [something]
is (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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)