グリフアイコン画像の下に縦に下に

Question

​​画像の隣に画像を配置しますが、画像の中央に来ます。

<div class="col-xs-3"> 
      <img src="@Url.Content(Model.DefaultImagePath)" alt="Image" height="150" width="150"/> 
      <span class="glyphicon glyphicon-pencil" style="color: #292929; background-color: #E3DAC9;"></span> 
      <span class="glyphicon glyphicon-plus" style="color: #292929;background-color: #E3DAC9"></span> 
     </div> 

それがレンダリングされる方法：次のように

Answer 1

使用vertical-align:bottom

span { 
 
    vertical-align: bottom; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-xs-12"> 
 
    <img src="http://www.fillmurray.com/150/150" alt="Image" height="150" width="150" /> 
 
    <span class="glyphicon glyphicon-pencil" style="color: #292929; background-color: #E3DAC9;"></span> 
 
    <span class="glyphicon glyphicon-plus" style="color: #292929;background-color: #E3DAC9"></span> 
 
</div>

Answer 2

あなたはvertical-align: baseline;スタイル宣言を使用する必要があります：

これは私がしたい方法です

<div> 
    <img src="@Url.Content(Model.DefaultImagePath)" alt="Image" height="150" width="150"/> 
    <span class="glyphicon glyphicon-pencil" style="color: #292929; background-color: #E3DAC9;vertical-align: baseline;"></span> 
    <span class="glyphicon glyphicon-plus" style="color: #292929;background-color: #E3DAC9;vertical-align: baseline;"></span> 
</div> 

両方のアイコンが親divの一番下に揃えられます。

多くのスタイル宣言をインラインで配置するのは良い考えではありません。それらはcssクラスとして抽出することができます。