Question

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

    #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; align-self: center; align-item: center; margin: auto，但所有这些属性都无法解决此问题。

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

请帮我一个线索。

Answer 1

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

看看这个小提琴：http://jsfiddle.net/98BRm/1/

顶部垂直对齐内联块和水平相同的边距

1 个答案: