如下所示,我有三个方框.您可以看到在方框1和3中一切正常,但是在方框2中,文本内容重叠.

这是因为< div>类别为.vertical_center.grade_info的对象,其margin-left选项仅适用于100px.我不要这些路口.

如何单独更改所有包装盒的左边距以避免出现此问题？

到目前为止,这是我的代码：

.three_separation {

width: 100%;

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-gap: 60px;

}

.grades_dashboard_Box {

height: 130px;

width: 320px;

background-color: #0d0d0d;

color: #ffffff;

margin: 0 auto;

position: relative;

}

.grade_display {

float: left;

font-size: 60px;

}

.vertical_center {

margin: 0;

position: absolute;

top: 50%;

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

2.3

Beste Durchschnittsnote

Biologie

13.70

Durchschnittsnote

3.4

Schlechteste Durchschnittsnote

Deutsch