基于元素高度的CSS？
基于元素高度的CSS？
提问于 2017-05-05 11:06:13
我有一个按钮，它可以根据屏幕大小改变其高度，因为文本换行。
当屏幕大小足够大时，按钮完全适合：
但当它变小时，按钮不再居中：
我尝试应用@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吗？
回答 2
Stack Overflow用户
发布于 2017-05-05 11:12:34
尝试使用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>Stack Overflow用户
发布于 2017-05-05 11:13:01
您可以使用显示表和垂直对齐居中属性，使按钮和范围滑块始终位于容器的中心，如以下代码所示
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43795851
复制相关文章
相似问题
腾讯云开发者
