如何在图中垂直居中文本？答案

【问题标题】：How to center vertically text in figure?如何在图中垂直居中文本？
【发布时间】：2017-04-05 01:50:58
【问题描述】：

我想让两个文本都垂直居中，以分辨率为 720 像素的图像。文本“serwis”现在没有垂直居中于图像。我该怎么做？这是一个演示codepen

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>

SCSS 代码

$font: 'Lato', sans-serif;
$break-medium: 45em;
@function calculateRem($size) {
    $remSize: $size / 16px;
    @return $remSize * 1rem;
}
@mixin font-size($size) {
    font-size: $size;
    font-size: calculateRem($size);
}
.primary {
    background: -webkit-linear-gradient(top, rgb(10,198,162) 0%,rgb(0,160,175) 100%);
    height: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    @media only screen and (min-width: $break-medium) {
        display: flex;
        flex-direction: row;
    }

    &__figure {
        padding: 20px;
    }

    &__img {
        width: 100px;
    }

    &__caption {
        font-family: $font;
        text-transform: uppercase;
        font-weight: 700;
        @include font-size(30px);
        text-align: center;
        color: rgb(255,255,255);
        padding-top: 10px;
        @media only screen and (min-width: $break-medium) {
            float: right;
            @include font-size(40px);
            padding-left: 20px;
        }

        &--secondary {
            width: 100px;
            flex-wrap: wrap;
            @media only screen and (min-width: $break-medium)               {
                width: 200px;
            }
        }
    }
}

【问题讨论】：

你能做一个sn-p吗？
这里是codepen.io/anon/pen/mOWMrm

标签： html css text centering

【解决方案1】：

除了@Praveen Kumar 的回答，你还可以使用

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

当然父母需要有

display:table;

【讨论】：

【解决方案2】：

您在<figcaption> 中有float: right。浮动元素不能用于vertical-align。所以，你需要这样做：

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

预览

CodePen：http://codepen.io/anon/pen/NbpvyL

【讨论】：