带有表格单元的垂直中间答案

【问题标题】：Vertical middle with table-cell带有表格单元的垂直中间
【发布时间】：2016-03-15 10:37:43
【问题描述】：

我正在尝试使用表格、表格单元格和垂直对齐来使我的段落居中。由于某种原因，它不起作用。请检查我的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;
}

【问题讨论】：

【解决方案1】：

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

如果您更改了它，那么您能否编辑您的问题并在其中发布您的代码的先前版本。这将有助于有类似问题的人。

这是我目前看到的：

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

【讨论】：

【解决方案2】：

在此处编辑小提琴http://jsfiddle.net/k73xfayx/

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

我在您的 img（c 类）周围放置了另一个 DIV 以获得该结构：一个围绕 DIV (a)，其中两个 DIV（c 和 b），其中一个包含 img，一个包含文本的 p-Tag .

【讨论】：