CSSは要素の高さに基づいていますか？

Question

テキストの改行のために画面サイズに基づいて高さを変更するボタンがあります。

をしかし、それが小さくなったときに、ボタンが中心と停止します：画面サイズが十分に大きい場合

は、ボタンが完璧にフィット

私は適用してみました@media設定：

@media (max-width: 767px) { 
    #footer-content input[type="button"], 
    #footer-content button { 
     margin-top: -22px; 
    } 
} 

@media (min-width: 768px) { 
    #footer-content input[type="button"], 
    #footer-content button { 
     margin-top: -10px; 
    } 
} 

そして、改行が発生した場合、それは完璧に動作します：

しかし、それはないと画面が767pxよりも小さい場合、それは再び偏心します：

私は、画面の幅ではなくボタンの高さに基づいてCSSをやっていることを望んでいましたが、私が行っている研究はあまり役に立たなかったので、とにかくありますCSSを使ってこれをやっているのですか？またはJavaScriptを使うように強制されますか？

Answer 1

フレックスボックスをお試しください。これが実際に入力タイプの範囲であれば、それを動作させるには​​を指定する必要はありません。 https://jsfiddle.net/vo4xcrm5/

CSS

.wrapper { 
    display: flex; 
    margin-top: 100px; 
} 

.range { 
    width: 100%; 
} 

.button { 
    max-width: 15%; 
} 

HTML

<div class="wrapper"> 
    <input class="range" type="range" /> 
    <span class="button"> 
    Some type of button-like thing 
    </span> 
</div> 

Answer 2

ボタンと範囲スライダは、容器の中心に常にあるように、あなたは、何かを表示テーブルと垂直整列中間のプロパティを使用することができます以下のコードのように

 <div> 
      <div style="display:table"> 
       <div style="display:table-cell;vertical-align:middle"><input type='range'></div> 
       <div style="display:table-cell;vertical-align:middle"><input type="submit" value = 'something'/></div> 
      </div> 
     </div>