Placing emoji in paragraphs without affecting the `line-height`
How to insert an emoticon into a paragraph without affecting line-height
no matter how big the emoticon is? I.e. as:
The closest I got is either position: absolute
or vertical-align: text-top
, none of which completes the task.
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>
I am aware of similar questions here and here , however both are out of date and without the correct answers.
source to share
you can use
margin-top: [something];
margin-bottom: [something];
vertical-align: middle;
Where [something]
(containerLineHeight - imageHeight) / 2
.
Also note that you can just use margin: [something] 0
if there is no right or left margin.
For example, since the image has height: 35px
, if the container has 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>
Note, using the values above 7.5px
won't hurt because of vertical-align: middle
. Therefore, you can use something like
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>
Alternatively, you can use percentages, which will be calculated relative to the width of the generated block containing the block .
Therefore, if the width of the container is greater than the height of the image, should suffice 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>
To be more secure, you can also use something like 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>
source to share