図の中にテキストを縦に並べる方法は？

Question

解像度720pxで画像の上下左右の両方に画像を配置したいと考えています。 "serwis"という文字列は現在画像に対して垂直にセンタリングされていません。 どうすればいいですか？ はここにあなたが<figcaption>でfloat: rightを持ってデモ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

です。フローティングエレメントは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;