CSS display：table - display：tableを使用して、2つのセルを別のDIVの中央に並べるにはどうすればいいですか？

Question

私は2つのセルを含むテーブルdivを持っています。私は細胞が水平にお互いに触れ、両側に等しい境界を持つようにしたい（外側のDIVの中心にあるように見える）。私はこれを行うことができる方法はありますか？

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

私が今持っているのは、テストワンが左に表示されますが、中央に必要です。

Fiddle

Answer 1

は、あなたがこのように書くことがあります

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

チェックこのhttp://jsfiddle.net/sandeep/bmtBU/3/

複数のチェックについてSteven theoryCSS way to horizontally align table