在div内部对齐图像和文本

Question

我正在尝试创建一个30px高度的div，其中有一个图像，并且其内部的跨度与同一条道路对齐。

div {
  height: 30px;
  width: 80px;
  outline: 1px solid black;
}
.image {
  height: 16px;
  vertical-align: middle;
}
span {
  vertical-align: middle;
}

<div>
  <img class='image' src="http://s16.postimg.org/uiq5bnwm9/place.png">
  <span>Places</span>
</div>

Answer 1

要使元素垂直居中，请使用::before伪元素，然后将其设为inline-block，与其父元素的高度相同，并vertical-align: middle。

div {
  height: 30px;
  width: 80px;
  outline: 1px solid black;
}
div::before {
  display:inline-block;
  content:'';
  height: 100%;
  vertical-align: middle;
}
.image {
  height: 16px;
  vertical-align: middle;
}
span {
  vertical-align: middle;
}

<div>
  <img class='image' src="http://s16.postimg.org/uiq5bnwm9/place.png">
  <span>Places</span>
</div>