2つのdivを互いに隣り合わせに中央に配置しますか？

Question

私は水平に中心を置く必要がある2つがありますが、それらはお互いに隣り合っている必要があります。基本的に、動的に追加されるhtmlはボタンです。私の2つのコードはここにあり、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> 

を、2つのボタンが互いに横にあるが、それらは、水平方向の中央されていません

。子供に助けを

ありがとう！

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>