Chanchal Chanchal - 4 months ago 16
CSS Question

Glyph icon vertically down next to image

I want to place glyphicon next to image close to bottom, however it comes to the mid of the image.

<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>


How it is rendered:
Actual

This is how I want:
Expected

Answer

Use 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>

Comments