2行を情報欄に揃える方法

Question

私はこれらの2行の情報をインフォボックスに表示しています....しかし、1行にアイコンがあり、次の1行はありません。私は、アイコンを使わないで2番目の行が正しくインデントされるように、単語をどのように整列させるかを正確には分かりません。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="alert alert-info"> 
 
    <i class="alert-icon-info alert-icon"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
 
</div>

それがこの

EDITのように出てくる：また、ブートストラップを使用して...あなたはカスタムを作ることができている場合はそれが

Answer 1

のdivですべてを包むする必要はありませんが、私はちょうどスパンであなたのコピーをラップし、あなたのアイテムを揃えるフレキシボックスを使用することをお勧めし。

HTMLの編集：

<div class="alert alert-info my-alert"> 
    <i class="alert-icon-info alert-icon"></i> 
    <span class="alert-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</span> 
</div> 

CSS編集：ここ

.my-alert { 
    display:flex; 
    flex-direction:row; 
} 

JSFiddle：ここではCSS-トリックでフレキシボックスにhttps://jsfiddle.net/visioncreative/ufu6Lcud/3/

グレートドキュメント、https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

を助けている場合あなたはdisplay: flex;を試してみてください。
コンテナを作成してと同じ行に置くように設定すると、かなり簡単になります。

.alert { 
 
    display: flex; 
 
    align-items: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="alert alert-info"> 
 
    <i class="alert-icon-info alert-icon"><!--WARNING : remove the image, it's only there to demonstrate that it's working--><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Info_icon-72a7cf.svg/1024px-Info_icon-72a7cf.svg.png" width="20"/><!--END OF WARNING--></i> 
 
    <span class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </span> 
 
</div>

完全なガイドはこちらを参照してください：A Complete Guide to Flexbox