Центрируйте два div горизонтально, рядом друг с другом?

Question

У меня есть два, которые мне нужно центрировать по горизонтали, но они должны быть рядом друг с другом. В принципе, html, который добавляется динамически, является кнопкой. Вот мой код для моих двух, а CSS - встроенный, я не могу заставить эту работу работать независимо от того, что я пытаюсь сделать. Если я использую дисплей:. Встроенный блок, я не могу заставить их быть рядом друг с другом :(

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