居中兩個div的水平，彼此相鄰？

我有兩個我需要水平居中，但他們需要彼此相鄰。基本上，動態添加的HTML是一個按鈕。這是我的兩個代碼，CSS是內聯的，無論我嘗試什麼，我都無法得到這個工作。如果我使用顯示：inline-block的，我不能讓他們成爲彼此:(旁邊居中兩個div的水平，彼此相鄰？

<div class="infor-experience col-lg-2 more_info"> 
    <div class="bottom-add-bid-buttons"> 
    {% if request.user|isEmployer %} 
     <div class="add-to-list" style="float:left; width:300px;">{% include "layout/addtolistmodal.html" %}</div> 
     <div class="connect-now bottom" style="width:300px; margin-left:320px;">{% include "layout/bidmodal.html" %}</div> 
    {% endif %} 
    </div> 
</div>

有了這個代碼，這兩個按鈕是彼此相鄰，但它們不是水平居中

。

感謝您的幫助！

來源

2016-11-29 user2573690

可你只是發表您的輸出屏幕截圖？ –

我已刪除float:left;和150px只是舉例寬度減小。並且給了text-align:center母公司和display:inline-block兒童

.bottom-add-bid-buttons { 
 
    text-align: center 
 
} 
 
.add-to-list, 
 
.connect-now { 
 
    width: 150px; 
 
    display: inline-block; 
 
    text-align: left; 
 
    border: 1px solid #ddd; 
 
}

<div class="infor-experience col-lg-2 more_info"> 
 
    <div class="bottom-add-bid-buttons"> 
 
    <div class="add-to-list">div 1</div> 
 
    <div class="connect-now bottom">div 2</div> 
 
    </div> 
 
</div>

來源

2016-11-29 05:34:57

工作，謝謝！ – user2573690

我想，這是你可以用CSS彈性框做的事情。所有你需要的是標記display：flex and justify-content：center;

.bottom-add-bid-buttons { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.bottom-add-bid-buttons > div { 
 
    border: 1px dotted black; 
 
    margin: 2px; 
 
    width: 300px; 
 
}

<div class="infor-experience col-lg-2 more_info"> 
 
    <div class="bottom-add-bid-buttons"> 
 
    <div class="add-to-list">Some Text</div> 
 
    <div class="connect-now bottom">Some other Text</div> 
 
    </div> 
 
</div>

來源

2016-11-29 05:48:26 Sreekanth

居中兩個div的水平，彼此相鄰？

回答

相關問題