CSS - 縦方向の中心を合わせて右に浮かぶ問題

Question

画像スライダの両側にdivの矢印ボタンを置いて、垂直に整列させ、divのそれぞれの辺に合わせて配置します。 div、右矢印はdivの右側に揃えられます。私の問題は、私がfloat:rightとline-heightを使用しているとき、矢印の画像が垂直に正しく整列しているが、ボタンが垂直に整列していないことです。

これは私のhtmlです：

<div class="row"> 
     <div class="large-1 columns arrow"> 
     <div class="button tertiary previous"> 
      <img src="{{ asset('/img/left-arrow.svg') }}" /> 
     </div> 
     </div> 
     <div class="large-10 columns"> 
     <div class="swiper-container"> 
      <div class="swiper-wrapper"> 
      @foreach($issues as $issue) 
       <div class="swiper-slide"> 
       <img 
        src="/imagecache/large/{{ $issue->first()->image }}" 
        onclick="magazineDetail(
        '{{ $issue->first()->magazine->id }}', 
        '{{ $issue->first()->magazine->name }}', 
        '{{ $issue->first()->magazine->summary ?: '' }}', 
        '{{ $issue->first()->magazine->image ?: '' }}', 
        '{{ $issue->first()->image }}' 
        )" 
        > 
       </div> 
      @endforeach 
      </div> 
     </div> 
     </div> 
     <div class="large-1 columns arrow"> 
     <div class="button tertiary next"> 
      <img src="{{ asset('/img/right-arrow.svg') }}" /> 
     </div> 
     </div> 
    </div> 

これは私のSCSSです：

ul { 
    &.button-group { 
    margin-left: 0; 
    li:first-child { 
     width: 30%; 
    } 
    li:not(:last-child) { 
     margin-right: .7rem; 
    } 
    } 
} 
.button { 
    text-decoration: none; 
    line-height: inherit; 

    &:focus { 
    outline: none; 
    background-color: none; 
    } 

    &:active { 
    box-shadow: 0 0 0 0 transparent; 
    } 

    &.primary { 
    background-color: $purple; 
    color: $white; 

    &:hover { 
     background: rgba($purple, 0.4); 
    } 
    } 

    &.secondary { 
    background-color: $white; 
    border-color: $black; 
    color: $black; 

    &:hover { 
     background: $white; 
     border-color: $light-gray; 
     color: $black; 
    } 
    } 

    &.tertiary { 
    background: transparent; 
    border-color: $white; 
    color: $white; 
    height: 100%; 
    font-size: 1.1rem; 
    padding: .4rem; 

    &:active { 
     background: $white; 
     color: $black; 
    } 
    } 

    &.narrow { 
    padding-left: 2.2em; 
    padding-right: 2.2em; 
    } 

    &.expand { 
    width: 100%; 
    } 
} 

.carousel { 
    margin-top: 10%; 

    .carousel-nav { 
    text-align: right; 
    } 

    .featured-magazines { 
    margin-top: $global-margin; 
    } 

    .button.tertiary { 
    height: 40px; 
    line-height: normal; 

    &.next { 
     vertical-align:middle; 
     float:right; 
     line-height: 200px 
    } 
    } 

    .all { 
    margin-top: 30px; 
    width: 100%; 
    } 

    .swiper-container{ 
    text-align: center; 
    } 

    .arrow { 
    line-height: 200px; 
    } 
} 

Answer 1

あなたがトップと矢のための絶対位置を使用することができます50％

はまた、相対的な位置決めを必要としますコンテナrow上に配置し、絶対配置ではアンカーポイントとして使用します。

ここに私がセットアップする方法のペンがあります。 http://codepen.io/pstonier/pen/mAvgEV

Answer 2

私はあなたの問題を理解しました。ただ、このCSSに

CSSを追加します -

.columns{ 
     display: inline-block; 
     vertical-align: middle; 
    } 

あなたの矢印は、スライダ画像に縦に途中整列され、右矢印と左矢印の両方を水平に整列されます。

あなたの問題： -

私の与えられたCSSを追加した後： -