イメージの上にテキストを含む水平方向の配置？

Question

Hia！ 私は自分が望むイメージの側にテキストを持っています。以下に示すように。

https://image.ibb.co/bWWO0F/Capture.jpg

しかし、私は

https://image.ibb.co/ksgZ7v/Capture1.jpg

がどのように私はこれを行うことが...ここに私の素晴らしい図面のように、画像の上部にあるテキストを取得するために苦労していますか？ここで

が私のHTMLです...

<div> 
    <img style="vertical-align:middle" width="350" class="img-circle" align="top" src="image.jpg"> 
    <p>Works.</p> 
</div> 

Answer 1

flexboxを使用してください。

.flexbox { 
 
    display: flex; 
 
    border: 1px solid; 
 
    padding: 15px; 
 
} 
 

 
.img-circle { 
 
    border-radius: 100%; 
 
}

<div class="flexbox"> 
 
    <img style="vertical-align:middle" width="350" class="img-circle" align="top" src="http://placehold.it/350x350"> 
 
    <p>Works.</p> 
 
</div>

Answer 2

ブレークタグを使用して、あなたは、単純なHTMLでこれを達成することができます。

<label>Text</label> 
<br> 
<img> 

はい、それは簡単ですが、それは拡張可能ではありません。私はあなたがラインを分割することができますが、実際には高さや位置、または実際には何も決定していないことを意味します。これを正しい方法にするために、あなたはcssを実装する必要があります。