Currently experimenting with CSS to create a calendar design that mimics the look of a traditional paper calendar. One issue I've encountered is the alignment of numbers within boxes, especially when dealing with double digits.
When displaying a single digit, the number aligns perfectly in the center. However, when it comes to double digits, the alignment appears off-center.
I've thought about implementing a solution where I detect double digits and adjust the margin accordingly, but I'm hoping for a cleaner approach.
.calendar
{
font-family:arial,sans-serif;
margin:0 auto;
width:400px;
height:400px;
background-color:#ffffff;
border:1px solid #000000;
text-align:center;
-webkit-box-shadow:10px 10px 0px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:10px 10px 0px 0px rgba(0, 0, 0, 0.75);
box-shadow:10px 10px 0px 0px rgba(0, 0, 0, 0.75);
line-height:400px;
}
.single-digit
{
font-size:22em;
}
.double-digit
{
font-size:20em;
}
The following code demonstrates the alignment:
<div class="calendar"><span class="single-digit">1</span></div>
In contrast, this displays the misaligned double digit:
<div class="calendar"><span class="double-digit">10</span></div>
If you have any suggestions or insights on achieving centered alignment for both single and double digits within the calendar, please share!
Thank you!