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。我已经尝试使用‘空白处:0自动’，但它不起作用。请告诉我，我该怎么做呢？谢谢!我需要左对齐的图像和居中对齐的结果文本。

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/

Answer 2

试试这个..。

​

.preloader span {
  display: inline;
  vertical-align: middle;
  margin: 0 auto;
}
.preloader {
  text-align: center;
}
.preloader img {
  float: left;
}

<div class="preloader">
  <img src="img/preloader.gif">
  <span>
    <strong>Получение адреса...</strong>
  </span>
</div>

​

Answer 3

您好，检查此链接可能对您有帮助，http://jsfiddle.net/allenktpr80/tq0ta3gs/

<div class="preloader">
  <img src="http://www.ajaxload.info/images/exemples/21.gif">
  <span>
    <strong>Please wait while its loading</strong>
  </span>
</div>

如果您将加载器图像放在文本左侧，则使用此css

.preloader img {
  float: none;
  position: relative;
  top: 10px;
}

http://jsfiddle.net/allenktpr80/qvxe7jo4/