Question 257043 in Html Question posted in
Some basic documentation can be found here.

Html – Caption of h2 tag not centering vertically

I have this code and I want the "0" in the <h2> element centred. No matter what I do to the .score class the "0" just stays at the top center and doesn’t move from the top.
See image of problem

body {
    margin: 0;
    background-color: #0369A1;
    text-align: center;
}

@font-face {
    font-family: CursedTimerUlil-Aznm;
    src: url(fonts/CursedTimerUlil-Aznm.ttf);
}

h3 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #EEE;
    font-size: 40px;
    font-weight: 700;
    margin: 21px;
}

.score {
    font-family: CursedTimerUlil-Aznm;
    border: 3px solid #BE123C;
    border-radius: 4px;
    background-color: #FB7185;
    width: 200px;
    font-weight: 400;
    font-size: 90px;
    margin: 28px 0;
}

.container {
    display: flex;
    justify-content: space-around;
}

.counters {
    display: flex;
    justify-content: space-between;
    margin: 0;
}

.counter-btn {
    font-family: CursedTimerUlil-Aznm;
    font-weight: 400;
    font-size: 18px;
    width: 48px;
    height: 48px;
    border: 2px solid #EEE;
    border-radius: 3px;
    color: #EEE;
    background-color: #0369A1;
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="container">
            <div class="card">
                <h3>HOME</h3>
                <h2 class="score">0</h2>
                <div class="counters">
                    <button class="counter-btn">+1</button>
                    <button class="counter-btn">+2</button>
                    <button class="counter-btn">+3</button>
                </div>
            </div>
            <div class="card">
                <h3>GUEST</h3>
                <h2 class="score">0</h2>
                <div class="counters">
                    <button class="counter-btn">+1</button>
                    <button class="counter-btn">+2</button>
                    <button class="counter-btn">+3</button>
                </div>
            </div>
        </div>
    </body>
</html>

I have another piece of code in which the the "0" stays centred perfectly but I can’t figure out what is the wrong with the first one and what’s the difference between the two pieces of code.
Working code image.

My working HTML code:

body {
    margin: 0;
    text-align: center;
}

.score {
    background: #0a0001;
    font-size: 90px;
    color: #F94F6D;
    width: 120px;
    margin: 20px;
}

.container {
    display: flex;
    justify-content: space-around;
}

button {
    background: none;
}
<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="container">
            <div class="column">
                <h3>HOME</h3>
                <h2 class="score">0</h2>
                <div>
                    <button>+1</button>
                    <button>+2</button>
                    <button>+3</button>
                </div>
            </div>
            <div class="column">
                <h3>GUEST</h3>
            </div>
        </div>
    </body>
</html>
Tags:

2

Answers


  1. 0

    The first snippet has more CSS properties applied to .score compared to the second one, but the changes below should get the result you want. "should"..

    .score {
    font-family: CursedTimerUlil-Aznm;
    border: 3px solid #BE123C;
    border-radius: 4px;
    background-color: #FB7185;
    width: 200px;
    font-weight: 400;
    font-size: 90px;
    margin: 28px 0;
    display: flex;           /* Added this line */
    justify-content: center; /* Added this line */
    align-items: center;     /* Added this line */
}
    Login or Signup to reply.
  2. 0

    It simply depends on the font, which reserves space above and below the characters – usually more below for characters like y, p q etc. which extend below the baseline (called "descenders"). Single characters are not treated differently just because they temselves don’t have descenders – all characters have to fit into the reserved space.

    The solution: Either use another font or create some padding-top for its parent element.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search