CSS display: table - 如何使用 display: table 将两个单元格排列在另一个 DIV 的中心？答案

【问题标题】：CSS display: table - How can I line up two cells to be in the center of another DIV using display: table?CSS display: table - 如何使用 display: table 将两个单元格排列在另一个 DIV 的中心？
【发布时间】：2011-12-09 21:32:48
【问题描述】：

我有一个包含两个单元格的表格 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

【问题讨论】：

标签： html css

【解决方案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

【讨论】：