Question

我有两个我需要水平居中但是它们需要彼此相邻。基本上，动态添加的html是一个按钮。这是我的两个代码，CSS是内联的，无论我尝试什么，我似乎都无法工作。如果我使用display：inline-block，我不能让它们彼此相邻:(。

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

使用此代码，两个按钮彼此相邻，但它们不是水平居中的。

感谢您的帮助！

Answer 1

我已删除了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>

Answer 2

我认为，这是你可以用css flex box做的事情。您只需标记 display：flex 和 justify-content：center;

＆＃13;

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

＆＃13;

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

＆＃13;

将两个div水平居中，彼此相邻？

2 个答案: