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