ボックスdivをテキストのインラインで表示する

Question

私は3つの画像を持っています。それらをテキストでインラインスタイルで表示したいのですが、ブートストラップグリッドシステムを使用せずに、それらをお互いに接近させて中央に配置したいので、しかし、一度私は彼らがお互いの下に表示されるテキストを追加し、どのように私はそれを修正することができますか？ここに私のコードは次のとおりです。

.box{ 
 
display:inline; 
 
}

<div class="text-center"> 
 
<div class="box"> 
 
<img src="http://placehold.it/50x50" style="height:120px"> 
 
<p>Test</p> 
 
</div> 
 
<div class="box"> 
 
<img src="http://placehold.it/50x50" style="height:120px"> 
 
<p>Test</p> 
 
</div> 
 
<div class="box"> 
 
<img src="http://placehold.it/50x50" style="height:120px"> 
 
<p>Test</p> 
 
</div> 
 
</div>

Answer 1

CSS Flexbox（適切なHTMLのセマンティクスなしインラインCSSスタイルと一緒に）！

.container { display:flex; justify-content:center; } 
 
.container figure { text-align:center; margin:0; } 
 
.container img { height:120px; }

<div class="text-center container"> 
 
    <figure> 
 
    <img src="http://placehold.it/50x50"> 
 
    <figcaption>Test</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <img src="http://placehold.it/50x50"> 
 
    <figcaption>Test</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <img src="http://placehold.it/50x50"> 
 
    <figcaption>Test</figcaption> 
 
    </figure> 
 
</div>

Answer 2

あなたが接近していたが、それはdisplay: inline-blockする必要があります。コードスニペットを参照してください：

.box{ 
 
display:inline-block; 
 
}

<div class="text-center"> 
 
<div class="box"> 
 
<img src="http://placehold.it/50x50" style="height:120px"> 
 
<p>Test</p> 
 
</div> 
 
<div class="box"> 
 
<img src="http://placehold.it/50x50" style="height:120px"> 
 
<p>Test</p> 
 
</div> 
 
<div class="box"> 
 
<img src="http://placehold.it/50x50" style="height:120px"> 
 
<p>Test</p> 
 
</div> 
 
</div>

注：私はあなたがスタックオーバーフローにここで働いていないtext-centerクラスを追加しました参照が、独自のコードでは、トリックを行う必要があります。

Answer 3

また、flexを親に使用すると、横に並べて表示されます。救助へ

.boxes{ 
 
    display:flex; 
 
    justify-content: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="text-center boxes"> 
 
    <div class="box"> 
 
    <img src="http://placehold.it/50x50" style="height:120px"> 
 
    <p>Test</p> 
 
    </div> 
 
    <div class="box"> 
 
    <img src="http://placehold.it/50x50" style="height:120px"> 
 
    <p>Test</p> 
 
    </div> 
 
    <div class="box"> 
 
    <img src="http://placehold.it/50x50" style="height:120px"> 
 
    <p>Test</p> 
 
    </div> 
 
</div>