html - CSS display:table-display:tableを使用して2つのセルを別のDIVの中央に配置するにはどうすればよいですか?

html css

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>


私が今持っているのは、Test Oneが左側に表示されていますが、中央に必要です。

Fiddle
答え
あなたはこのように書くかもしれません:

<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 theory CSS way to horizontally align tableを確認してください
関連記事

css - スクロールバーの下矢印が表示されない

javascript - 私の最初のWebアプリケーションを構築するための優れたリソース(おそらく、純粋なHTML5 / Javascript / CSS3を使用するだけ)

java - GWT:マルチスレッド

html - 奇妙なHTML / XMLエンコーディングの問題

javascript - キャンバスのサイズが相対的な場合、キャンバス上の正しいマウス位置を取得しますか?

asp.net - スティッキーフッターは貼り付けられますが、コンテンツは貼り付けられません

javascript - アニメーションをバックグラウンドで別の要素の背後に保持するにはどうすればよいですか?

html - ディレクトリ内のすべてのファイルにXSLを適用する一般的な方法は?

javascript - antによってJavaScript(HTML)ファイルを実行し、出力をファイルにリダイレクトします

php - notepad ++での複数行のphp echoステートメントの構文の強調表示