如何将内箱对齐到桌子的中心

Question

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

我的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>

所以，你正在使用display: table-cell; for .inside_box和margin: auto; 将无法工作，因为它现在是一个表格单元格，所以你可以做的是，将一个div包裹在你好的世界文本中，就像这样

演示

<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选择器块的属性。

---

注意：您不需要float: none; ，不知道你为什么要使用它。

---

当我收到评论时，如果您不想添加额外的div元素，那么请考虑使用没有table标记的td 。 所以这个div没有办法display: table-cell; 尊重margin: auto; 。

来自Mozilla开发者网络：

Answer 2

尝试更改并使您的CSS像这样：

.outer_table td {
text-align: center; // Align center
}

.inside_box {
float: none; // if you set float left or right your box will move right there
margin: 0px auto; // this setting for balancing margin left and right
}



<table class="outer_table">
<tr><td><div class="inside_box">Hellow wolrd!</div></td></tr>
</table>