DIV table-cell width 100%

Question

Here is my code:

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

Why is that the width:100% is not working? How can I solve it?

Answer 1

Try giving width: 100% to parent so that the child has full width.

<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

Try this. Container div must be 100%. Then we can set to child's

<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

Can you try this,

  <!-- 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>