You have the option to utilize
margin-top: [something];
margin-bottom: [something];
vertical-align: middle;
Here, [something] refers to
(containerLineHeight - imageHeight) / 2
.
Additionally, you can simplify by using margin: [something] 0 if no right or left margin is required.
For instance, given an image with height: 35px and a container with 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>
It's safe to use values above 7.5px due to vertical-align: middle. You could even use something extreme 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, percentages can be used, calculated based on the width of the generated box's containing block.
So, if the container's width exceeds the image's height, margin: -50% 0 should suffice.
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 play it extra safe, a value like margin: -1000000% 0 can be used.
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>