javascript - 在父 div 中并排居中对齐 2 个固定宽度的 div

Question

我试图让 2 个 div 恰好位于父 div 的中心。两个子 div 都采用父 div 的高度。我试过 float:left 和 right with margin: 0 auto。我不希望一个 div 居中而另一个稍微偏移。我希望 div 1 右侧位于准确的中心，而 div 2 左侧也位于准确的中心。 (我更喜欢使用 CSS，但如果需要，JS 也可以)。

这是 HTML:

<div class="green">
    <div class="div1">
        Div 1
    </div>
    <div class="div2">
       Div 2
    </div>
</div>

这是 CSS:

.green {
    height:50px;
    width:100%;
    background-color:#9fbe3c;
}
.div1 {
    height:100%;
    width:141px;
    margin:0 auto;
}
.div2 {
    width:141px;
    height:100%;
    float:right;
    position:relative;
    top:-50px;
}

Fiddle

出于某种原因，div 2 被推出了父 block 。我试过 display:inline-block 但没有用，所以我只使用了相对位置。

Answer 1

你可以像this那样做

HTML

<div class="green">
    <div class="div1">
        Div 1
    </div>
    <div class="div2">
       Div 2
    </div>
</div>

CSS

.green {
    height:50px;
    width:100%;
    background-color:#9fbe3c;
  text-align: center;
}
.div1, .div2 {
    height:100%;
    width:141px;
    margin:0 auto;
  display: inline-block
}