ブラウザ間のインライン要素の高さの不一致

Question

2つのインラインブロック要素でブックエンドのインラインフレックス要素があります。彼らはすべて異なる高さですが、私は彼らを垂直センターに揃えたいと思います。

これはインラインブロック要素にposition: relative; top: 53px;を適用することで可能です。しかし、firefoxでは、これは私がそれらを望む場所の下にインラインブロックを置きます。

オフセットの削除私は要素のデフォルト位置がwebkitとfirefoxでは全く異なっていることがわかります。ここで

はフィドルです：https://jsfiddle.net/ralphonz/p9s1pjtd/29/

は、ここに私のHTMLです：

<div class="newsletter-navigation" role="navigation"> 
    <div class="arrow prev-arrow"> 
    <svg width="100%" height="100%" viewBox="0 0 20 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path id="Arrow-Right-Icon" d="M18.64 32.359L6.323 18.569 18.64 4.78c.923-1.035.923-2.711 0-3.744-.924-1.035-2.421-1.035-3.344 0L1.356 16.642c-.474.531-.701 1.23-.688 1.927-.013.695.214 1.396.688 1.927l13.94 15.606c.923 1.033 2.42 1.033 3.344 0 .923-1.034.923-2.71 0-3.743z" fill="#6d4272"></path></svg> 
    </div> 
    <ul class="nav nav-pills"> 
    <li class="archive-year">2017 
     <ul class="nav"> 
     <li class="nav-item">Item 1</li> 
     <li class="nav-item">Item 2</li> 
     <li class="nav-item">Item 3</li> 
     <li class="nav-item">Item 4</li> 
     <li class="nav-item">Item 5</li> 
     </ul> 
    </li> 
    <li class="archive-year">2016 
     <ul class="nav"> 
     <li class="nav-item">Item 1</li> 
     <li class="nav-item">Item 2</li> 
     <li class="nav-item">Item 3</li> 
     <li class="nav-item">Item 4</li> 
     <li class="nav-item">Item 5</li> 
     </ul> 
    </li> 
    </ul> 
    <div class="arrow next-arrow"> 
    <svg width="100%" height="100%" viewBox="0 0 20 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path id="Arrow-Right-Icon" d="M18.64 32.359L6.323 18.569 18.64 4.78c.923-1.035.923-2.711 0-3.744-.924-1.035-2.421-1.035-3.344 0L1.356 16.642c-.474.531-.701 1.23-.688 1.927-.013.695.214 1.396.688 1.927l13.94 15.606c.923 1.033 2.42 1.033 3.344 0 .923-1.034.923-2.71 0-3.743z" fill="#6d4272"></path></svg> 
    </div> 
</div> 

、ここでは私のSCSSです：

.newsletter-navigation { 
    width: 100vw; 
    position: relative; 
    margin-bottom: 2em; 
    padding: 0 2em 2em; 
    background-color: rgb(230,230,230); 
    .arrow { 
     display: inline-block; 
     position: relative; 
     top: 53px; 
     width: 19px; 
     height: 37px; 
     cursor: pointer; 
     color: rgb(109,66,114); 
    } 
    .prev-arrow { 
     margin-right: .5em; 
    } 
    .next-arrow { 
     margin-left: .5em; 
     transform: rotate(180deg); 
    } 
    ul.nav { 
     display: inline-flex; 
     flex-wrap: nowrap; 
     width: 100%; 
     overflow: scroll; 
     li { 
     width: 25vw; 
     margin-right: 1em; 
     padding: 1em 2em; 
     background-color: rgb(31,148,195); 
     border-radius:.5em; 
     color: #fff; 
     ul { 
      padding: 0; 
     } 
     } 
     .nav-item { 
     text-align: center; 
     } 
     .archive-year { 
     width: auto; 
     margin: 0; 
     padding: 0; 
     background-color: transparent; 
     color: rgb(128, 128, 128); 
     } 
    } 
    &>ul.nav { 
     width: 85%; 
    } 
    } 

は、どのように私は一貫性のある、クロスブラウザの結果を取得し、私を達成することができます垂直センターアライメントの目標？

Answer 1

とにかくフレックスボックスを使用しているので、要素を垂直に揃えるために使用することもできます。

#container { 
 
    align-items: center; 
 
    display: flex; 
 
} 
 

 
.small { 
 
    background: #fcc; 
 
} 
 

 
.big { 
 
    background: #ccf; 
 
    font-size: 2em; 
 
}

<div id="container"> 
 
    <span class="small">flexbox</span> 
 
    <span class="big">vertical</span> 
 
    <span class="small">alignment</span> 
 
</div>

Updated fiddle