Html 如何在图中垂直居中文本？

我想有两个文本中心垂直于图像的分辨率720px。 文本“serwis”现在没有垂直于图像居中。 我该怎么做？ 这里有一个演示

HTML代码

<section class="primary">
        <figure class="primary__figure">
            <img class="primary__img" src="http://www.linkpad.me/static/img/welcome/key.png" alt="">
            <figcaption class="primary__caption">serwis</figcaption>
        </figure>

        <figure class="primary__figure">
            <img class="primary__img" src="http://www.linkpad.me/static/img/welcome/key.png" alt="">
            <figcaption class="primary__caption primary__caption--secondary">częsci zamienne</figcaption>
        </figure>
    </section>

---

您在

中有

浮动：右

。浮动元素不能用于垂直对齐。因此，您需要执行以下操作：

.primary__caption, .primary__img {
  float: none;
  display: inline-block;
  vertical-align: middle;
}

预览

---

CodePen:

除了@Praveen Kumar answer，您还可以使用

display:table-cell;
vertical-align:middle;

当然，家长需要

display:table;

---

你能编个片段吗？给你

display:table;