CSS 水平对齐 display-inline span答案

【问题标题】：CSS horizontal alignment display-inline spanCSS 水平对齐 display-inline span
【发布时间】：2015-12-11 10:00:18
【问题描述】：

有如下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'，但它不起作用。请告诉我，我该怎么做？谢谢！因此，我需要左对齐的图像和居中对齐的文本。

【问题讨论】：

你能展示所需输出的模型吗？

标签： html css

【解决方案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/

【讨论】：

它也对齐图像...我需要那个图像在左边
文本将在顶部，因为图像是浮动的。一些真实图像的过去链接，你会看到
但是你的文本是水平居中对齐的，对吧？因为你要求...
但是垂直对齐被破坏了，我不要了。
那是因为跨度上没有高度。

【解决方案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>

【讨论】：

【解决方案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/

【讨论】：

【解决方案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

【讨论】：