html - DIV 表格单元格宽度 100%

Question

这是我的代码：

<div style='display: table'>
    <div style='height:200px; width:100%; text-align: center; display: table-cell; vertical-align: middle'>No result found</div>
</div>

为什么这width:100%不起作用？我该如何解决？

Answer 1

尝试给width: 100%父母，让孩子有全宽。

<div style='display: table; width:100%; background:#f00;'>
    <div style='height:200px; width:100%; text-align: center; display: table-cell; vertical-align: middle'>No result found</div>
</div>

Answer 2

试试这个。容器 div 必须为 100%。然后我们可以设置为孩子的

<div style="display: table; width: 100%;">
<div style="height: 200px; text-align: center; display: table-cell; vertical-align: middle; width: 100%;">No result found</div>
</div>

Answer 3

你可以试试这个，

  <!-- it is parent div need to set width for the element -->
 <div style="width:100%;display: table;"> 
   <!-- child div, it used the parent element width if it is not set. you can specifiy your own width, if you want make it small than parent div -->
   <div style='height:200px; width:100%; text-align: center; display: table-cell; vertical-align: middle'>No result found</div>
 </div>