CSS水平对齐显示-行内展示span

Question

以下是HTML代码：

有以下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;
}

我之前已经将一个元素在

中垂直对齐，但现在我需要将水平对齐。我尝试使用'margin: 0 auto'，但它没有起作用。请告诉我如何做到这一点？谢谢！我需要左对齐的图像和居中对齐的文本。

- malcoauri

---

你能展示一下期望输出的模拟吗？ - m4n0

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>

Fiddle: http://jsfiddle.net/r0z75mey/4/

- Ionut Necula

---

它将图像对齐了...我需要该图像在左侧。 - malcoauri

由于图像是浮动的，因此文本将位于顶部。请粘贴一些真实图像的链接，您将看到翻译后的文本。 - malcoauri

但是你的文本是水平居中对齐的，对吧？因为这是你所要求的... - Ionut Necula

但是垂直对齐已经出现了问题，我不想要这样。 - malcoauri

这是因为您在 span 上没有设置高度。 - Ionut Necula

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>

- Amit singh

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/

- Allen

Answer 4

我想知道您是否能够更改您的HTML？如果可以，请尝试以下方法：

HTML：

<div class="preloader">
  <div class="wrapper">
    <img src="https://cdn4.iconfinder.com/data/icons/geomicons/32/672395-loading-32.png">
  </div>
  <span>
    <strong>Получение адреса...</strong>
  </span>
</div>

CSS：

.preloader {
  text-align: center;
  line-height: 64px;
}
.wrapper {
  float: left;
  display: inline-block;
}
img {
  vertical-align: middle;
}

请查看http://jsfiddle.net/utdwqs1v

- Duc Le