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

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>