在父div內並排居中對齊2個固定寬度的div

Question

我正在嘗試使2個div正好位於父div的中心。 兩個子div均采用父div的高度。 我試過了float：left和right，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;
}

小提琴

由於某種原因，div 2被推出了父塊。 我已經嘗試過display：inline-block，但是那沒有用，所以我只使用了相對位置。

Answer 1

你可以像這樣

的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
}

Answer 2

嘗試添加text-align: center和display: inline-block同時刪除空白/浮動邏輯。

這是修改過的小提琴： http : //jsfiddle.net/Gad4C/9/

希望這可以幫助。