Question

我正在寻找一个属性，

将内部div元素水平居中
将内部div元素的宽度设置为40px的固定宽度

我试着看看它是否有效。我使用了display:table和display:table-cell，因为其中会有更多的表格单元格和表格行。这只是一个非工作案例的例子。

当我使用display：table宽度为100％时，我可以将内部div元素居中。这将是（1）的解决方案。

我的问题是第（2）点。我想要一个宽度为40px的表格单元格。此时内部div扩展到外部div的100％宽度。你可以看看this fiddle，看看我的意思。数字周围的边界应该只有40px宽。

你知道如何解决它吗？

<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;
}

Answer 2

您可以在HTML中使用它：

<div class="wrapper">  
         <div class="inner"> 1</div> 
</div>

和CSS：

.wrapper
{
   width:100%;
   height:47px;
   border:1px solid blue;
   text-align:center;
}

.inner
{  
   margin: 0 auto;
   width:40px;
   height:47px;
   border:1px solid red;
}

Answer 3

如果将其设置为像表一样，它的行为就像一个表，如果只有一列，它将具有表的宽度。

因此，您可以添加更多单元格来填充整个表格，或者摆脱表格布局并使用@ Summer的解决方案。

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

3 个答案: