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;
 }

Answer 2

我不知道这是不是你要找的。

1）创建两个div（作为列）并将图像放在中间（图像将与两列重叠。）

DEMO

 img
 {
 background: red;
 height: 300px;
 width:400px;
 margin: auto;
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 }

2）使用不透明度创建2 div（作为列）：0.5并将图像放在中间（图像将像添加z-index时的背景一样）

DEMO

img
{
z-index:-1;
}

祝你好运!!

与图象的两个专栏文本在中间中部

2 个答案: