html - 使用显示属性时如何为内部 div 元素设置固定宽度

Question

我正在寻找特性，

1. 将内部 div 元素水平居中

2. 将该内部 div 元素的宽度设置为 40 像素的固定宽度

我试了下看是否有效。 我使用了 display:table 和 display:table-cell 因为里面会有更多的 table-cells 和 table-rows。这只是一个非工作案例的例子。

当我使用宽度为 100% 的 display:table 时，我可以将内部 div 元素居中。 这将是 (1) 的解决方案。

我的问题是第 (2) 点。 我想要一个宽度为 40px 的表格单元格。 目前内部 div 扩展到外部 div 的 100% 宽度。 你可以看看我的意思this fiddle . 数字周围的边框应该只有 40 像素宽。

你知道如何解决它吗？

<div style="display:table;width:100%;height:47px;border:1px solid blue;text- align:center;">  
         <div style="display:table-cell;width:40px;height:47px;border:1px solid red"> 1</div> 
</div>

Answer 1

为什么不呢:

div.inner {
 margin: 0 auto;
 width: 40px;
}