css - top vertical-align with inline-block 和水平相同的边距

Question

此 CSS 代码使两列框排列在一个更大的容器中。基本上这很好用，但它有一个问题 - 每行上的框不是水平居中。左侧框的边距小于右侧框的右侧边距。我需要让它们相同。

    #container {
        width:  20pc;
        height: 40pc;
        border-style: solid;
        border-width: 1px;
    }
    .box {
        border-style: solid;
        border-width: 1px;
        width: 45%;
        display: inline-block;
        vertical-align: top;
    }

这段html是

<div id="container">
  <p class="box">Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box</p>
  <p class="box">The values "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", and "table-row-group" are not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.</p>
  <p class="box">This may be the best technique overall, simply because the height can vary with the content and browser support is great. The main disadvantage is the extra markup, requiring a total of three elements to get the final one centered.</p>
  <p class="box">Displays an element as an inline-level flex container. New in CSS3</p>
</div>

我试过这些 css 属性 justify-content: space-around;对齐 self :中心；对齐元素:居中； margin: auto，但是都没有解决这个问题的效果。

Jsfiddle .我什至无法通过分别为左右框设置固定的相同左右边距来解决它。盒子的高度是动态的，盒子的数量不是奇数就是偶数。我的最终目标是让它看起来真的像一个两列的盒子。

请帮我提供线索。

Answer 1

您是否尝试过将 text-align: center; 添加到您的 #container CSS？

看看这个 fiddle :http://jsfiddle.net/98BRm/1/