html - 跨度对齐中心与 img 标签

Question

我认为这很容易，但我被卡住了。我想要做的是根据左边的图片将文本“Some Text”居中。当我在下面的div中编写用于使div居中的代码时，更改没有生效。 有些东西我没见过，有些东西我错过了。很高兴你能帮助我。

margin:auto;
width:50%;

现在

我想要什么

.liTitle{
     padding:10px;
     background-color:#C4161A;
     color:white;
     cursor:pointer;
}
.liText{
  margin:auto;
  width:50%;
}

<div class="liTitle">
<img src="http://www.denizli.bel.tr/userfiles/image/icon/nobetcieczane.gif" width="24" height="24">
<span class="liText">Some Text</span>
</div>

Answer 1

或者，您可以使用标准 inline-block 显示属性和 vertical-align 轻松实现相同的预期行为，如下面嵌入的代码片段所示。

这种方法的一个优点是它不受与 flex-box 相同的遗留浏览器兼容性和支持限制的影响，也就是说； 它将在 IE 11 中运行。

代码片段演示:

.liTitle {
  padding: 10px;
  background-color: #C4161A;
  color: white;
  cursor: pointer;
}

.liText {
  margin: auto;
  /* additional */
  display: inline-block;
  vertical-align: middle;
}

/* Additional */

.liTitle img {
  display: inline-block;
  vertical-align: middle;
}

<div class="liTitle">
  <img src="http://www.denizli.bel.tr/userfiles/image/icon/nobetcieczane.gif" width="24" height="24">
  <span class="liText">Some Text</span>
</div>