html - IE8 仅使用 css 在图像上方垂直居中对齐跨度？

Question

我想在 IE8 中将 span 标签相对于图像标签和上方图像垂直居中对齐。

我有一个像这样的 DOM:

    <div class="parent">
      <img src="pathToImage"/>
      <span>Align this text to vertical center</span>
   </div>

好的回答值得赞赏。

Answer 1

如果 span 有一个已知的高度(多少文本/行)，你可以向下 float 图像并让 span 移动到图像释放的区域:

.parent:before {
  content: '';
  float: left;
  height: 2em;/* at least enough for one line of text */
}
img {
  float: left;
  clear: left;
}

<div class="parent">
  <img src="http://placehold.it/100" />
  <span>Align this text to vertical center</span>
</div>

要过滤 IE8，您可以使用 the conditionnal comments from IE toolbox <!--[if IE8]><style>/* styles here */</style><[endif]-->对于任何旧版浏览器，您可以通过 flex 覆盖此 float 行为:

.parent:before {
  content: '';
  float: left;
  height: 2em;
}
img {
  float: left;
  clear: left;
}
.parent {
  display: flex;
  align-items: center;
}

<div class="parent">
  <img src="http://placehold.it/100" />
  <span>Align this text to vertical center</span>
</div>

...

我还是不明白它的意义？

过滤IE8的另一种方式

body:before {
  content:'IE8';
  }
body::before {
  content:'NOT IE8';
  }