h2 标签的标题未垂直居中-解网

问：

我有这个代码，我希望元素中的“0”居中。无论我对班级做什么，“0”都停留在顶部中心，不会从顶部移动。<h2>.score 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>

我有另一段代码，其中“0”完美地居中，但我无法弄清楚第一段代码有什么问题，以及两段代码之间有什么区别。 Working code image.

我的工作HTML代码：

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>

HTML CSS 居中

.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 */
}

0赞 Johannes 10/3/2023 #2

这仅仅取决于字体，字体在字符的上方和下方保留空间——通常在下方为延伸到基线以下的 y、p q 等字符（称为“降序”）保留更多空间。单个字符不会仅仅因为它们没有降序而区别对待——所有字符都必须适合保留的空间。

解决方案：要么使用另一种字体，要么为其父元素创建一些字体。padding-top

上一个：将卡片中的行居中

下一个：在图像周围添加边框后，如何在 div 中将图像居中？

h2 标签的标题未垂直居中

Caption of h2 tag not centering vertically

评论