中心两个div是水平的，彼此相邻？

I have two 's which I need to center horizontally but they need to be next to each other. Basically, the html that is added dynamically is a button. Here is my code for my two 's and the CSS is inline, I can't seem to get this working no matter what I try. If I use display: inline-block, I can't get them to be beside each other :(.

我有两个我需要水平居中但是它们需要彼此相邻。基本上，动态添加的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>

With this code, the two buttons are beside each other but they are not centered horizontally.

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

Thanks for the help!

谢谢您的帮助！

2 个解决方案

#1

I have removed float:left; and reduced width by 150px just for example. and gave text-align:center to parent and display:inline-block to child

我删除了浮动：左;例如，将宽度减小150px。并将text-align：center设置为parent并显示：inline-block to child

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

#2

I think, this is something you could do with css flex box. All you need is mark display:flex and justify-content: center;

我想，这是你可以用css flex box做的事情。你需要的只是标记显示：flex和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>

#1