Scenario:
I am currently working on a personal project where I need to design playing cards for a game using CSS
Main Objective:
My goal is to align the text on the cards so that it appears centered and visually appealing
Actions Taken:
The relevant HTML code snippet is as follows:
<div class = "card_header">
<div class = "card_cost">1</div>
</div>
And the corresponding CSS styling includes:
.card_header {
position: relative;
top: 110px;
box-sizing: border-box;
width: 100%;
height: 75px;
}
.card_cost {
position: absolute;
top: 50%;
right: 165px;
transform: translateY(-50%);
font-size: 60px;
font-weight: bold;
}
Issue at Hand:
Despite my efforts, the alignment of the card_cost text within the card_header appears inconsistent across different browsers. It seems too high in Firefox and too low in Safari.
To better understand the problem, I added border: 1px dotted gray; to visualize the layout differences between Safari and Firefox:
https://i.sstatic.net/GbLi9.png https://i.sstatic.net/bRQYQ.png
It became evident that the vertical centering of text presents differently in each browser. This raises questions about browser compatibility and finding a universal solution to achieve consistent alignment. Is there an alternative approach to ensure proper vertical centering of the text?
Edit:
Upon considering suggestions about using line-height, here's the updated appearance with line-height: 1; applied to card_cost (Safari vs. Firefox):
https://i.sstatic.net/XbqYj.png https://i.sstatic.net/3XHTT.png
While this adjustment attempted to address the issue, it still falls short in achieving optimal vertical alignment, particularly noticeable in Firefox where the text remains positioned higher than desired.