Question

我有这个包含图片和文字的html块。我希望将图标题垂直居中，并能够将它放在多行上。我无法弄清楚。尝试过table-technique和inline-block。

这是一个显示问题的小提琴。

编辑：代码。

<div class="set">
<figure>
    <img src="http://placehold.it/141x141">
    <figcaption>Lorem ipsum dolor sit amet</figcaption>
</figure>
<figure>
    <img src="http://placehold.it/141x141">
    <figcaption>Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet</figcaption>
</figure>
<figure>
    <img src="http://placehold.it/141x141">
    <figcaption>Lorem ipsum dolor sit amet</figcaption>
</figure>

.set {
    float: left;
    position: relative;
    width: 100%;
}

figure {
    width:100%;
    float:left;
}

img {
    float: right;
    max-width: 141px;
    width: 50%;
    display:block;
}

figcaption {
    color: #83786c;
    width: 50%;
}

Answer 1

也许让它表现得像一个表？

因此将数字设置为 display：table; ，img和ficaption to display：table-cell; 由于桌子的性质，外观的顺序很重要。因此，我将ficaption交换为img之前的源代码。

查看下面的代码或更新的小提琴http://jsfiddle.net/qb72szt2/1/。

.set {
  float: left;
  position: relative;
  width: 100%;
}
figure {
  display: table;
  width: 100%;
  float: left;
}
img {
  max-width: 141px;
  width: 50%;
  display: table-cell;
}
figcaption {
  display: table-cell;
  vertical-align: middle;
  color: #83786c;
  width: 50%;
}

<div class="set">
  <figure>
    <figcaption>Lorem ipsum dolor sit amet</figcaption>
    <img src="http://placehold.it/141x141">
  </figure>
  <figure>
    <figcaption>Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet</figcaption>
    <img src="http://placehold.it/141x141">
  </figure>
  <figure>
    <figcaption>Lorem ipsum dolor sit amet</figcaption>
    <img src="http://placehold.it/141x141">
  </figure>
</div>

Answer 2

试试这个：

将position: relative规则移至figure定位器
在figcaption上使用绝对邮寄，即..
使用transform : translate，以便如果figcaption包含大量文本，则会被恰当地移位。

figure {
    width:100%;
    float:left;
  position: relative;
}

figcaption {
    position: absolute;
    top: 50%;
    /* I added this tranform in so final positions can be tweaked */
    transform: translate(0,-50%);
    color: #83786c;
    width: 50%;
}

以下是您的小提琴的更新，其中包含大量文字 - http://jsfiddle.net/889qu538/

Answer 3

如果您了解figcaption的高度，那么您可以使用ghost元素技术垂直居中对齐文本。

.ghost-element {
    display: inline-block;
    vertical-align:middle;
    height: 100%;
    width: 1px;
}

Ghost元素就像其他具有未知高度的元素的标记，在已知高度的父容器中垂直对齐。

此处更新了小提琴 http://jsfiddle.net/qb72szt2/3/

中心图标题垂直在容器内

3 个答案: