基於元素高度的CSS？

我有一個按鈕，根據屏幕大小改變其高度，因爲文本換行。基於元素高度的CSS？

當屏幕尺寸足夠大，按鍵完全符合：

但是，當它變得更小，按鈕會停止居中：

我試着申請@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？

來源

2017-05-05 Sergio Toledo Piza

Flexbox將在它的睡眠。 – 2017-05-05 03:08:52

嘗試使用flexbox。如果這實際上是一個輸入類型範圍，則甚至不需要指定以使其起作用。 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>

來源

2017-05-05 03:12:33 jas7457

您可以使用顯示錶和垂直居中對齊屬性，使按鍵和範圍滑尺始終在容器的中心，東西像下面的代碼

 <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>

來源

2017-05-05 03:13:00 subbu

基於元素高度的CSS？

回答

相關問題