Question

我想在屏幕中央对齐两个非固定宽度的div，我希望两者都出现在同一个水平面上。我想在左div的右边缘和右div的左边缘之间没有边距。所以我把它鞭打了......

<div id="container">
    <div id="left"><%= render 'form' %></div>
    <div id="right"><%= render 'totals' %></div>
</div>

然后添加了这个CSS

#container {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
}

#left {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background-color: green;
        float: left;
        display: inline-block;
}

#right {
        float: right;
        background-color: red;
        display: inline-block;
}

但令人失望的是，左侧DIV出现在浏览器屏幕的最左侧，右侧div显示在浏览器的最右侧（使用Mac上的Chrome），并且DIV之间有很大的空间。如何纠正上述内容以消除它们之间的空间？

Answer 1

摆脱你的花车。然后将font-size: 0放在#container和font-size: 16px上。

#container {
   font-size: 0;
}
#left, #right {
   font-size: 16px; //You can use font-size: initial if you don't care about IE
}

JSFiddle

如何在浏览器屏幕的中心对齐两个非固定宽度的div？

1 个答案: