图像旁边垂直向下的字形图标答案

【问题标题】：Glyph icon vertically down next to image图像旁边垂直向下的字形图标
【发布时间】：2016-07-11 23:22:42
【问题描述】：

我想将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>

如何呈现：

这就是我想要的：

【问题讨论】：

标签： html css asp.net-mvc twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案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 类。

【讨论】：