垂直/水平将表格单元格中包含的div中的数字居中

debugcn 发表于 Dev

用户名

我需要将div（或其他任何内容）中包含的数字（垂直和水平）居中-该div的宽度和高度必须为60px，是一个圆形，并且必须在表格单元格。

到目前为止，我所能做的就是将div放在表格单元格的中心，但是无论我做什么，我都无法将文本垂直放在该div中心。

有人可以帮忙吗。

.outer {
    display: table;
    border: 2px solid red;
    width: 200px;
    height: 200px;
}
.inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid blue;
    width: 50%;
}
.number-box {
    display: inline-block;
    border: 1px solid green;
    border-radius: 30px;
    width: 60px;
    height: 60px
}
.number {
    display: inline-block;
    border: 2px solid blue;
    font-size: 28px;
}

<div class="outer">
    <div class="inner">
        <div class="number-box">
            <div class="number">1</div>
        </div>
    </div>
</div>

编辑

这实际上是我想要的：

<style>
.outer {
    border: 2px solid red;
    width: 100%;
    display: table;
    vertical-align: middle;
}
.cell1 {
    border: 2px solid red;
    width: 10%;
    display: table-cell;
    vertical-align: middle;
}
.cell2 {
    vertical-align: middle;
    font-size: 22px;
    border: 2px solid red;
    width: 90%;
    display: table-cell;
}
.number-box {
    display: table;
    border: 1px solid green;
    border-radius: 30px;
    width: 60px;
    height: 60px;
    vertical-align: middle;
    margin: 0 auto;
}
.number {
    font-size: 18px;
    line-height: 28px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
</style>

<div class="outer">
    <div class="cell1">
        <div class="number-box">
            <div class="number">1</div>
        </div>
    </div>
    <div class="cell2">
        xxxxas asd ad asd asd asd asd asda adsasd asd asd asdkajsd asd asda sd adasd asdasdasdasd ad asd asd asd asd asd asd as dad asd asdadasda sda dasdasdadasdad
    </div>
</div>

在此处输入图片说明

伊瑟伍德

试试这个。我删除了您的其中一个元素。可以很容易地更换它。

.outer {
    border: 2px solid red;
    width: 200px;
    height: 200px;
}
.number-box {
    display: table;
    border: 1px solid green;
    border-radius: 30px;
    width: 60px;
    height: 60px;
    margin: 70px auto 0;
}
.number {
    font-size: 28px;
    line-height: 28px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

<div class="outer">
    <div class="number-box">
        <div class="number">1</div>
    </div>
</div>

演示版

这里的一个警告是font-size和line-height必须匹配。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。