CSS水平对齐显示 - 内联跨度

Question

有以下HTML代码:

<div class="preloader">
  <img src="img/preloader.gif">
  <span>
    <strong>????????? ??????...</strong>
  </span>
</div>

CSS代码:

.preloader span {
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
}

我垂直对齐div中的span,但现在我需要水平对齐span.我试过使用'margin:0 auto',但它不起作用.请告诉我,我该怎么办？谢谢!我需要具有左对齐的图像和具有中心对齐的文本作为结果.

Answer 1

用途text-align: center;:

.preloader {
  text-align: center;
}

.preloader img {
  float: left;
}

.preloader span {
  line-height: 64px;
}

<div class="preloader">
  <img src="http://orig14.deviantart.net/f682/f/2010/331/4/e/darth_vader_icon_64x64_by_geo_almighty-d33pmvd.png">
  <span>
    <strong>????????? ??????...</strong>
  </span>
</div>

小提琴:http://jsfiddle.net/r0z75mey/4/