居中两个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的水平，彼此相邻？

回答

相关问题