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

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; .inside_box并且margin: auto;将无效，因为它现在是一个表格单元格，所以您可以做的是，包裹{{1}围绕 hello world 文本，就像这样

Demo

div

使用CSS

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

确保将.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而不使用td标记。因此table div无法尊重display: table-cell;。

From Mozilla Developer Network :

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>