html - 两列文本，中间有图像

Question

我环顾四周但找不到有关如何将图像放置在双栏文本页面的垂直和水平中心的教程或建议。我看到过将图像跨两列但在文本顶部对齐的解释。我想在中间对齐图像。!

这可能吗？我更愿意用 CSS 来做，但会考虑任何可行的方法，(尤其是如果它附带一些说明的话。) 感谢您提供的任何帮助(即使是让我放弃。)(c;

Answer 1

我找到了描述的技术 here如下所示非常有效:

HTML

<div class="container">
  <div class="inner">
    <img src="//placehold.it/200x200">
  </div>
</div>

CSS

.container {
  text-align: center;
}

.container:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
 }

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