我希望记分板垂直居中。我尝试了不同的方法,但它们就是行不通,可能是覆盖了 CSS 代码,但我不知道。 (https://i.sstatic.net/M6JCLCKp.png)
使用了100vh、100%语法,使用了其他容器div。尝试了边距,但它们只是扩展了页面。
body {
margin: 0;
}
#container {
height: 100vh!important;
display: flex;
align-items: center;
justify-content: center;
}
#scoreboard {
font-family: "Kanit";
color: white;
height: 840px;
width: 100%;
}
<div id="container">
<div id="scoreboard">
<div id="player1">
<span id="data1">
<span id="seed1">
</span>
<span id="name1">
</span>
</span>
<div id="serve1">
</div>
<span id="pts1">
</span>
<span id="set11">
</span>
<span id="set12">
</span>
<span id="set13">
</span>
</div>
<div id="player2">
<span id="data2">
<span id="seed2">
</span>
<span id="name2">
</span>
</span>
<div id="serve2">
</div>
<span id="pts2">
</span>
<span id="set21">
</span>
<span id="set22">
</span>
<span id="set23">
</span>
</div>
</div>
body {
margin: 0;
}
#container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#scoreboard {
font-family: "Kanit";
color: white;
width: 100%; /* Remove fixed height */
max-width: 600px; /*to prevent it from expanding too much */
}