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

尝试使用flexbox。 如果这实际上是输入类型范围，则您甚至无需指定align-items: center; 使它工作。 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

您可以使用display table和vertical align middle属性，以便按钮和范围滑块始终位于容器的中心，类似于下面的代码

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