user2573690 user2573690 - 9 days ago 6
CSS Question

Center two div's horizontally, next to each other?

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

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

Answer

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

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