CSS display: table - How can I line up two cells to be in the center of another DIV using display: table?

Question

I have a table div that contains two cells. I want the cells to touch each other horizontally and to have an equal border on each side (appear centered within the outer DIV). Is there some way I can do this?

<div id='hdr_msg' style='display: table; border: 1px solid red; width: 200px;'>
   <div id='hdr_txt'>
      <div id="hdr_msg1" style='display: table-cell; border: 1px solid blue;'>Test</div>
      <div id="hdr_msg2" style='display: table-cell; border: 1px solid green;'>One</div>
   </div>
</div>

What I have now is that Test One appears to the left but I need it in the center.

Fiddle

Answer 1

may be you write like this :

<div id='hdr_msg' style='display: table; border: 1px solid red; width: 200px;'>
   <div id='hdr_txt' style="display: table;margin:0 auto">
      <div id="hdr_msg1" style='display: table-cell; border: 1px solid blue;'>Test</div>
      <div id="hdr_msg2" style='display: table-cell; border: 1px solid green;'>One</div>
   </div>
  </div>

Check this http://jsfiddle.net/sandeep/bmtBU/3/

For more check Steven theory CSS way to horizontally align table