如何在圖中垂直居中文字？

Question

我希望兩個文本垂直居中分辨率720px圖像。 「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; 
      } 
     } 
    } 
} 

Answer 1

你有<figcaption>float: right。浮動元素不能用於vertical-align。所以，你需要做的：

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

預覽

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

Answer 2

除了@Praveen庫馬爾回答，您還可以使用

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

，當然還有父母需要有

display:table;