h2 标签的标题未垂直居中

问题描述 投票：0回答：1

我有这段代码，我希望 

<h2>
元素中的“0”居中。无论我对 
.score
类做什么，“0”都只会停留在顶部中心并且不会从顶部移动。 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 center centering
1个回答
0
投票

与第二个片段相比，第一个片段应用了更多应用于 .score 的 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 */
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.