divの内部要素をCSSと垂直に整列する方法は？

Question

divの内部要素を垂直に揃えようとしています。

HTML

<div class="d1"> 
    <div class="d2"></div> 
    <span>Hello how r u doing,</span> 
    <span>Ismail?</span> 
</div> 

Jsfiddle：https://jsfiddle.net/wgt8zg7t/

出力は次のようにする必要があります：上部の

d2、および<span>テキストがd2以下でなければならない：

d2 
Hello how r u doing, 
Ismail? 

注：私は自分のd1内部要素のいずれかに絶対位置を使用することはできません。

Answer 1

spanのdefault displayがinlineあるとしてだけで、出力を次取得するdisplay:blockにspan tagのdisplayを変更。ここで、.d2がブロック要素であるため、これは要素を次々に整列させる。

span{ 
    color:white; 
    display:block;/*Add this*/ 
} 

Answer 2

span { 
    color: white; 
    display: block; 
} 

Answer 3

だけ表示プロパティのためにあなたのCSSに

Refer to this

詳しい情報をdisplay:blockを追加します。w3School: CSS Display property

Answer 4

がdisplay:blockスタイリングを使用し<span>要素で、あなたの希望する結果を得ることができます。

Answer 5

スパンであなたのCSSを変更してください。表示ブロックを追加します。下記参照。

働い

span { 
    color:white; 
    display:block; 
}