I'm currently working on a project involving placing emojis at different coordinates within a webpage. At times, the emoji is larger than its container. For instance, here is an example of HTML code that positions a house with a font size of 100px inside a 50px container.
div.emoji-container {
position: absolute;
left: 200px;
top: 200px;
width: 50px;
height: 50px;
background-color: red;
}
div.emoji {
position: relative;
font-size: 100px;
line-height: 100px;
} <div class="emoji-container">
<div class="emoji">🏠</div>
</div>You can view the fiddle.
The issue is that the emoji doesn't appear centered within the red square.
Is there a way to use CSS to horizontally center the emoji within its container, even when the emoji's width exceeds that of the container?
In essence, if the emoji's width is 100px and the container's width is 50px, then the emoji should extend beyond the container by 25px on each side.
A challenge arises from the fact that emojis with a font size of 100px have varying widths across different platforms such as Mac, Windows, Android, etc. The width may be 100px on Mac but around 113px on Windows.
If no CSS solution exists, I understand that a JavaScript solution could be implemented.