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

我想獲得2個div完全在父div中居中。兩個子div都取得父div的高度。我試過浮動：左右邊距：0自動。我不希望一個div居中，而另一個稍微偏移。我希望div 1右側位於正確的中心，而div 2左側位於正確的中間位置。（我寧願使用CSS，但如果需要的話JS也可以）。中心對齊2個固定寬度的div並排在父div內

下面是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被推出的父塊的。我試過顯示：內嵌塊，並沒有工作，所以我只是用相對位置。

來源

2014-07-13 sanfosr

你可以提供一些視覺（圖像會更好）。由於無法理解你想要的輸出。 – Tushar

您是否在尋找[this]（http://codepen.io/tusharbandal/pen/umrKp）？ – Tushar

[IMG] http://i61.tinypic.com/2412ni0.png [/ IMG] @Tushar是的，確切地說，由於某種原因，我應用了您的更改，並且這兩個div都位於父塊的左側 – sanfosr

你可以不喜歡它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 
}

來源

2014-07-13 06:06:14 Tushar

嘗試添加text-align: center和display: inline-block同時去除餘量/浮動邏輯。

下面是修改後的小提琴：http://jsfiddle.net/Gad4C/9/

希望這有助於。

來源

2014-07-13 06:08:46 link

是的，這就是它。這總是你總是忘記的簡單的事情。非常感謝！ – sanfosr

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

回答

相關問題