基于元素高度的CSS？

Question

我有一个按钮，根据屏幕尺寸改变其高度，因为文本换行符。

当屏幕尺寸足够大时，按钮完全适合：

但是当它变小时，按钮会停止居中：

我尝试应用def classify_single_elem(self, X_elem): Y_dict = {} # print ('self.label' ,self.labels) ok for label in self.labels: class_probability = self.class_probabilities[label] # print ('class probability' ,class_probability) okok for ii in range(0,len(X_elem)): relative_feature_values = self.nb_dict[label][ii] if X_elem[ii] in relative_feature_values.keys(): # ok class_probability *= relative_feature_values[X_elem[ii]] else: # when it gets to here the probability is set to zero # which means the dict has zero values class_probability *= 0 Y_dict[label] = class_probability return self.get_max_value_key(Y_dict) 设置：

@media

当换行发生时，它完美地运作：

但是当它没有并且屏幕小于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

您可以使用显示表和垂直对齐中间属性，以便按钮和范围滑块始终位于容器的中心，如下面的代码

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