带有 table-cell 的垂直居中

Question

我正在尝试使用 table、table-cell 和垂直对齐使我的段落居中。由于某种原因，它不起作用。请检查我的code。

html

<div class="a">
  <img src="http://dummyimage.com/600x400/000/fff" alt="">
  <div class="b">
    <p>sdfsdfsdfsdfsdfs</p>
  </div>
</div>

css

.a {
  display: block;
  float: left;
  height: 100%;
  min-height: 1px;
  width: 334px;
  background: red;
}

.a > * {
  float: left;
}

Answer 1

您的代码似乎根本不包含任何 <table> 标记。如果我误解了你的问题，我很抱歉。

如果您更改了它，那么您能否编辑您的问题和 post 您的代码的先前版本。这将帮助有类似问题的人。

这是我目前看到的：

<div class="a">
  <img src="http://dummyimage.com/600x400/000/fff" alt="">
  <div class="b">
    <p>sdfsdfsdfsdfsdfs</p>
  </div>
</div>

样式：

.a {
  display: block;
  float: left;
  height: 100%;
  min-height: 1px;
  width: 334px;
  background: red;
}

.a > * {
  float: left;
}

Answer 2

外部元素必须有display: table，内部table-cell

我在你的 img (class c) 周围放了另一个 DIV 来得到那个结构：一个围绕 DIV (a)，两个 DIV 在里面 ( c 和 b)，其中一个包含 img，一个带有文本的 p-Tag。

Vertical middle with table-cell