html - 如何将内框与表格中心对齐

Question

我有 table ，在 table 里面我有另一个盒子，我正在努力将盒子与 table 中央对齐。

我的CSS代码是

内框代码

.inside_box{
border: medium solid;
display: table-cell;
float: none;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
text-align: center;
vertical-align: middle;
width: 300px;
}

外部表格 CSS:

.outer_table {
    border: 1px solid black;
    border-radius: 5px;
    color: #1A6DAC;    
    font-size: 24px;
    left: 40px;
    padding: 20px;
    position: absolute;
    top: 260px;
    width: 740px;
}

如何让内框居中对齐？

Answer 1

我假设你的 HTML 是这样的

<div class="outer_table">
    <div class="inside_box">hello world</div>
</div>

因此，您正在为 .inside_box 使用 display: table-cell; 和 margin: auto; 将不起作用，因为它是现在是一个表格单元格，所以您可以做的是，将 div 包裹在 hello world 文本周围，如下所示

Demo

<div class="outer_table">
    <div class="inside_box"><div>hello world</div></div>
</div>

像这样使用CSS

.inside_box {
    border: medium solid;
    display: table;
    font-family: Helvetica-bold;
    font-size: 20.19px;
    height: 100px;
    margin: auto;
    width: 300px;
}
.outer_table {
    border: 1px solid black;
    border-radius: 5px;
    color: #1A6DAC;
    font-size: 24px;
    left: 40px;
    padding: 20px;
    position: absolute;
    top: 260px;
    width: 740px;
}

.inside_box > div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

确保将 text-align: center; 和 vertical-align: middle; 属性从 .inside_box 移植到 .inside_box > div 选择器 block 。

---

Note: You won't need float: none;, not sure why you are using that.

---

正如我收到的一条评论，如果您不想添加额外的 div 元素怎么办，所以可以这样想，您正在使用没有 的 td表标签。因此，带有 display: table-cell; 的 div 无法遵守 margin: auto;。

From Mozilla Developer Network :