在一个 div 中，垂直对齐文本的最佳实践是什么？

19 浏览
0 Comments

在一个 div 中，垂直对齐文本的最佳实践是什么？

这个问题已经有了答案:

如何垂直对齐div中的文本？

我正在努力实现对我的文本字段进行垂直对齐。

\"enter

我想把我的章节名整数和坐标平面放在我的红线正中间。

我已经尝试使用了垂直对齐, 但我可能使用不正确。

请有人给我一些提示吗？

Fiddle

HTML

    CHAPTER
    6
    Integers and the Coordinate Plane

LESS

.chapter-detail {
    border: solid #c9cacb 1px;
    background-color: #F9F9F9;
    color: #293644;
    margin-bottom: 10px;
    margin-left: 3px;
    margin-right: 35px;
    margin-top: 30px;
    line-height: 38px;
    .ch-d-wrapper {
        text-align: center;
        border-right: solid #c9cacb 2px;
    }
    .ch-d-chapter{
        text-transform: uppercase;
        font-size: 12px;
    }
    .ch-d-num {
        font-weight: bold;
        font-size: 35px
    }
    .ch-d-name {
        font-size: 23px;
        vertical-align: middle;
    }
}

admin 更改状态以发布 2023年5月20日
0

2 答案

0 Comments

您可以使用不同的技术，我认为它们同样有效。

1) 如果您知道父级的高度，只需使用line-height: "parent height"即可

2) 如果您不知道父级的高度，但您可以随意设置行高，则可以这样做：line-height: 20px; margin-top: calc(50% - 10px);

3) 使用垂直对齐的表格布局。

4) 使用align-items: center的弹性布局。

0
0 Comments

尝试这个

 .ch-d-name {
        line-height:70px;  //added this.
        font-size: 23px;
        vertical-align: middle;
    }

这里有演示

0