Html - Single digit align on second position (to be bellow second digit)

Justyn
July 3, 2024
110 views
4 votes
4 Answers

I have this code

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @font-face {
            font-family: 'Styrene Black';
            src: url('StyreneAWeb-Black.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Styrene Bold';
            src: url('StyreneAWeb-Bold.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Styrene Medium';
            src: url('StyreneAWeb-Medium.ttf') format('truetype');
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: 'Styrene Bold', Arial, sans-serif;
            color: white;
        }

        .container {
            background: url('pozadi2.png') no-repeat center center;
            background-size: cover;
            padding-left: 4rem;
            padding-top: 3rem;
            width: 1296px;
            height: 768px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            text-align: left;
        }


        .heading {
            font-size: 4rem;
            font-family: 'Styrene Bold';
            margin-bottom: 1rem;
        }

        .time-container {
            display: flex;
            align-items: flex-end;
            margin-bottom: 0rem;
        }

        .number {
            font-size: 4rem;
            font-family: 'Styrene Bold';
            margin-right: 0.5rem;
            min-width: 6rem;
            text-align: left;
        }

        .unit {
            font-size: 4rem;
            font-family: 'Styrene Medium';
            margin-right: 1.5rem;
        }

        .note {
            font-size: 2rem;
            font-family: 'Styrene Medium';
            margin-bottom: 0.5rem;
            color: #233254;
            line-height: 1.5;
        }

        .note2 {
            font-size: 2rem;
            font-family: 'Styrene Medium';
            margin-bottom: 2rem;
            color: #233254;
            line-height: 1.5;
        }

        .text-black {
            color: #233254;
            font-family: 'Styrene Black';
        }

        .note-container {
            margin-top: auto;
        }
    </style>
    <title>Title</title>
</head>
<div class="container" id="timer-container">
    <div id="month-display" class="heading"></div>

    <div class="time-container" id="days-container">
        <div id="days" class="number">1</div>
        <div id="days-unit" class="unit">den</div>
    </div>
    <div class="time-container" id="hours-container">
        <div id="hours" class="number">20</div>
        <div id="hours-unit" class="unit">hodin</div>
    </div>
    <div class="time-container" id="minutes-container">
        <div id="minutes" class="number">12</div>
        <div id="minutes-unit" class="unit">minut</div>
    </div>
    <div class="time-container" id="seconds-container">
        <div id="seconds" class="number">22</div>
        <div id="seconds-unit" class="unit">vteřin</div>
    </div>
</div>
</html>

and I need to align any single digit number to be on second position (Like 01 but i don´t want to show "0" I want only "1" but to be on second position).

How can I achive this?

I´ve tried few changes in CSS and as well I tried text-align: right but it kinda messed it I can´t change position of two digits number, it´s perfect, I just need to change one digit number to be at second position.

Answers

- Skunbydev
- July 3, 2024 at 2:15 pm
- 0 votes
0
You can use the following approach to ensure that a single-digit number is aligned to the second position without displaying the leading zero:
```
<div id="days" class="number"><span style="opacity: 0;">0</span>1</div>
```
Using the opacity style ensures that the zero occupies space but remains invisible. This way, the alignment is preserved without the zero being displayed.
Login or Signup to reply.

I’ve documented the changes in CSS.

color: white removed from body,html
align-text: left for class number changed to align-text: right.

@font-face {
  font-family: 'Styrene Black';
  src: url('StyreneAWeb-Black.ttf') format('truetype');
}

@font-face {
  font-family: 'Styrene Bold';
  src: url('StyreneAWeb-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Styrene Medium';
  src: url('StyreneAWeb-Medium.ttf') format('truetype');
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Styrene Bold', Arial, sans-serif;
  /* color: white; REMOVED */
}

.container {
  background: url('pozadi2.png') no-repeat center center;
  background-size: cover;
  padding-left: 4rem;
  padding-top: 3rem;
  width: 1296px;
  height: 768px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
}

.heading {
  font-size: 4rem;
  font-family: 'Styrene Bold';
  margin-bottom: 1rem;
}

.time-container {
  display: flex;
  align-items: flex-end;
  margin-bottom: 0rem;
}

.number {
  font-size: 4rem;
  font-family: 'Styrene Bold';
  margin-right: 0.5rem;
  min-width: 6rem;
  text-align: right; /* CHANGED */
}

.unit {
  font-size: 4rem;
  font-family: 'Styrene Medium';
  margin-right: 1.5rem;
}

.note {
  font-size: 2rem;
  font-family: 'Styrene Medium';
  margin-bottom: 0.5rem;
  color: #233254;
  line-height: 1.5;
}

.note2 {
  font-size: 2rem;
  font-family: 'Styrene Medium';
  margin-bottom: 2rem;
  color: #233254;
  line-height: 1.5;
}

.text-black {
  color: #233254;
  font-family: 'Styrene Black';
}

.note-container {
  margin-top: auto;
}

<div class="container" id="timer-container">
  <div id="month-display" class="heading"></div>
  <div class="time-container" id="days-container">
    <div id="days" class="number">1</div>
    <div id="days-unit" class="unit">den</div>
  </div>
  <div class="time-container" id="hours-container">
    <div id="hours" class="number">20</div>
    <div id="hours-unit" class="unit">hodin</div>
  </div>
  <div class="time-container" id="minutes-container">
    <div id="minutes" class="number">12</div>
    <div id="minutes-unit" class="unit">minut</div>
  </div>
  <div class="time-container" id="seconds-container">
    <div id="seconds" class="number">22</div>
    <div id="seconds-unit" class="unit">vteřin</div>
  </div>
</div>

- jemiloii
- July 3, 2024 at 2:23 pm
- 0 votes
0
A simple solution:

text-align: right;
margin-right: 1.5rem;
```
.number {
    font-size: 4rem;
    font-family: 'Styrene Bold';
    margin-right: 1.5rem;
    min-width: 6rem;
    text-align: right;
}
```
Login or Signup to reply.

As Skyunbydev has mentioned, you can use a hidden 0, to match the digits. Or if your digits are going to be dynamic, then setting extra character through JavaScript could be an option. In the following snippet I have:

Added an orange background-color to make the text visible, in html,body CSS.
Added a body tag to your code.
Added an extra script tag at the end of the body, this contains a function to check for single digits and add an extra character(hidden) to align single digits with remaining double-digit numbers. This function is currently being fired on window load.

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @font-face {
            font-family: 'Styrene Black';
            src: url('StyreneAWeb-Black.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Styrene Bold';
            src: url('StyreneAWeb-Bold.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Styrene Medium';
            src: url('StyreneAWeb-Medium.ttf') format('truetype');
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: 'Styrene Bold', Arial, sans-serif;
            color: white;
            background-color: orange;
        }

        .container {
            background: url('pozadi2.png') no-repeat center center;
            background-size: cover;
            padding-left: 4rem;
            padding-top: 3rem;
            width: 1296px;
            height: 768px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            text-align: left;
        }


        .heading {
            font-size: 4rem;
            font-family: 'Styrene Bold';
            margin-bottom: 1rem;
        }

        .time-container {
            display: flex;
            align-items: flex-end;
            margin-bottom: 0rem;
        }

        .number {
            font-size: 4rem;
            font-family: 'Styrene Bold';
            margin-right: 0.5rem;
            min-width: 6rem;
            text-align: left;
        }

        .unit {
            font-size: 4rem;
            font-family: 'Styrene Medium';
            margin-right: 1.5rem;
        }

        .note {
            font-size: 2rem;
            font-family: 'Styrene Medium';
            margin-bottom: 0.5rem;
            color: #233254;
            line-height: 1.5;
        }

        .note2 {
            font-size: 2rem;
            font-family: 'Styrene Medium';
            margin-bottom: 2rem;
            color: #233254;
            line-height: 1.5;
        }

        .text-black {
            color: #233254;
            font-family: 'Styrene Black';
        }

        .note-container {
            margin-top: auto;
        }
    </style>
    <title>Title</title>
</head>
  <body>
    <div class="container" id="timer-container">
    <div id="month-display" class="heading"></div>

    <div class="time-container" id="days-container">
        <div id="days" class="number">1</div>
        <div id="days-unit" class="unit">den</div>
    </div>
    <div class="time-container" id="hours-container">
        <div id="hours" class="number">20</div>
        <div id="hours-unit" class="unit">hodin</div>
    </div>
    <div class="time-container" id="minutes-container">
        <div id="minutes" class="number">12</div>
        <div id="minutes-unit" class="unit">minut</div>
    </div>
    <div class="time-container" id="seconds-container">
        <div id="seconds" class="number">22</div>
        <div id="seconds-unit" class="unit">vteřin</div>
    </div>
</div>
    <script>
      function reArrangeDigits() {
        const digitDivs = document.getElementsByClassName('number');
       for(let i=0; i<digitDivs.length; i++) {
         const digit = Number(digitDivs[i].innerHTML);
         if (!isNaN(digit) && digit < 10) {
           digitDivs[i].innerHTML = '<span style="opacity: 0;">0</span>' + digit;
         }
       }
      }
      window.addEventListener('load', reArrangeDigits);
    </script>
  </body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Single digit align on second position (to be bellow second digit)

Answers