垂直向下图像的字形图标

Question

我想将glyphicon放在靠近底部的图像旁边，但是它会出现在图像的中间位置。

 <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类提取。