Align an image and an Icon (CSS/Bootstrap)

Question

I can't understand why I can't have a perfect alignment between a simple image and an icon. The icon is moved a little bit on the top.

html,
body,
header {
  height: 100%;
}

.material-icons.box {
  color: #ff7f02;
  font-size: 48px;
  text-align: bottom;
}

.specialfull,
.specialfull .jumbotron {
  height: 60%;
  width: 100%;
  background-color: #616170;
}

.star {
  text-align: right;
}

.glyphicon-star {
  font-size: 55px;
  color: #ff7f02;
}

.searchbox {
  padding-top: 5%;
  text-align: center;
  height: 180px;
}

<div class="container specialfull">
    <div class="jumbotron">
        <div class="row">
            <div class="col-md-1 col-md-offset-11 star">
                <span class="glyphicon glyphicon-star"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3 searchbox">
                <div class="row">
                    <img src="http://placehold.it/100x100/CCCCCC&text=icon" style="display:inline;" height="48">
                    <i class="material-icons box">&#xE231;</i>
                </div>
                <div class="row"></div>
            </div>
        </div>
    </div>
</div>

I would like simply to align the second element close the first element. It appears more on the top of the div element. Why ?

Answer 1

vertical-align is useful for aligning siblings that are inline or inline-block Adding vertical-align: middle to your icon seems to work:

.material-icons.box 
{ 
    color: #FF7F02;
    font-size: 48px; 
    text-align: bottom;
    vertical-align: middle
}

Demo here: http://codepen.io/anon/pen/qdYNwg

You can try other values depending on the exact alignment you're after (e.g. bottom or top)