我试图将 grades_dashboard_box
的全部内容居中。布局本身很棒,但内容应在 griddiv 中居中。
.separation {
width: 100%;
display: grid;
grid-gap: 50px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(2, auto);}
}
.grades_dashboard_box {
height: 130px;
width: auto;
color: var(--text-color);
transition: color 1s;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
}
.grade_info {
margin-left: 20px;
}
.grades_dashboard_box>div {
display: flex;
flex-direction: row;
align-items: center;
}
.grades_dashboard_box {
width: 100px;
}
<div id="grade_shortboard" class="separation">
<div class='grades_dashboard_box'>
<div>
<h1 class="grade_display" id="grade_display_worst">14</h1>
<div class="grade_info">
<p style="font-size: 15px;">Schlechteste Durchschnittsnote</p>
<p id="grade_display_worst_sub" style="font-size: 20px;">Biologie</p>
</div>
</div>
</div>
<div class='grades_dashboard_box'>
<div>
<h1 class="grade_display" id="grade_display_average">7</h1>
<div class="grade_info">
<p style="font-size: 15px;">Gesamte Durchschnittsnote</p>
</div>
</div>
</div>
<div class='grades_dashboard_box'>
<div>
<h1 class="grade_display" id="grade_display_best">10</h1>
<div class="grade_info">
<p style="font-size: 15px;">Beste Durchschnittsnote</p>
<p id="grade_display_best_sub" style="font-size: 20px;">Swppl</p>
</div>
</div>
</div>
</div>
这是一个示例图像:
居中:
不居中:
~菲利普
编辑:
如您所见,字体开箱即用。据我所知,这个盒子是居中的。所以对于用户来说,由于输出的文本,框看起来不像是居中的。另一种方法是缩小字体,但我不希望这样。如何修复?
最佳答案
我稍微修改了您的代码以满足您的需要。 我在 strong text 而不是 .grades_dashboard_box 上添加了 width:100px 我还在 .grades_dashboard_box
中添加了 margin:auto;.separation {
width: 100%;
display: grid;
grid-gap: 50px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(2, auto);}
}
.grades_dashboard_box {
height: 130px;
width: auto;
color: var(--text-color);
transition: color 1s;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
}
.grade_info {
margin-left: 20px;
width: 100px;
}
.grades_dashboard_box>div {
display: flex;
flex-direction: row;
align-items: center;
}
.grades_dashboard_box {
margin: auto;
}
<div id="grade_shortboard" class="separation">
<div class='grades_dashboard_box'>
<div>
<h1 class="grade_display" id="grade_display_worst">14</h1>
<div class="grade_info">
<p style="font-size: 15px;">Schlechteste Durchschnittsnote</p>
<p id="grade_display_worst_sub" style="font-size: 20px;">Biologie</p>
</div>
</div>
</div>
<div class='grades_dashboard_box'>
<div>
<h1 class="grade_display" id="grade_display_average">7</h1>
<div class="grade_info">
<p style="font-size: 15px;">Gesamte Durchschnittsnote</p>
</div>
</div>
</div>
<div class='grades_dashboard_box'>
<div>
<h1 class="grade_display" id="grade_display_best">10</h1>
<div class="grade_info">
<p style="font-size: 15px;">Beste Durchschnittsnote</p>
<p id="grade_display_best_sub" style="font-size: 20px;">Swppl</p>
</div>
</div>
</div>
</div>
关于html - 解析网格内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56451630/