Html div中的垂直对齐中间按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45334086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical align middle button in div
提问by SQL and Java Learner
I am trying to vertically align this button in the center of the modal-footer div. Here is a link to my JSFiddle: https://jsfiddle.net/kris_redden/34jyLpok/
我试图在 modal-footer 的中心垂直对齐这个按钮div。这是我的 JSFiddle 的链接：https://jsfiddle.net/kris_redden/34jyLpok/
.modal-footer {
background-color: #2A3E5D;
color: white;
height: 100px;
padding: 2px 16px;
}
.wrapper-div {
vertical-align: middle
}
.button {
background: #e8e8e8;
display: inline-block;
font-size: 12px position: relative;
}<div class="modal-footer">
<div class="wrapper-div">
<button type="button" class="button"> Submit Filters </button>
</div>
</div>I'm not sure what needs to change in order for this to be vertically aligned in the center of the blue modal-footer div. I know can accomplish this in a hacky way by putting margins on the button but that isn't what I want to do.
我不确定需要更改什么才能使其在蓝色模态页脚 div 的中心垂直对齐。我知道可以通过在按钮上放置边距以一种骇人听闻的方式完成此操作，但这不是我想要做的。
采纳答案by Vishal Kumar Sahu
回答by Maarten van Tjonger
Easiest would be to add the following to .modal-footer
最简单的方法是将以下内容添加到 .modal-footer
display: flex;
align-items: center;
回答by omer
this can also be achieved by using
这也可以通过使用来实现
.button-container{
position:relative;
height:100%;
}
.button{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
vertical-align:middle;is not necessary here. i would use this method if button container height is unknown and if i could not use flex-box (dispaly:flex;) instead.
https://jsfiddle.net/34jyLpok/7/
vertical-align:middle;这里没有必要。如果按钮容器高度未知并且我不能使用 flex-box ( dispaly:flex;) 代替，我将使用此方法。
https://jsfiddle.net/34jyLpok/7/
another option is to use flex-box (display:flex;)
另一种选择是使用 flex-box ( display:flex;)
.button-container{
height:100%;
display: flex;
//flex-direction: column;//only vertical
align-items: center;//both vertical and horizonal
justify-content: center
}
.button{
width:100px;
}
the problem with display: flexis that it is not fully supported in old IE browser versions.
https://jsfiddle.net/34jyLpok/9/
问题display: flex在于旧版 IE 浏览器不完全支持它。
https://jsfiddle.net/34jyLpok/9/
回答by Morteza
You can change your style to this
你可以改变你的风格
.modal-footer {
background-color: #2A3E5D;
color: white;
height: 100px;
padding: 2px 16px;
display:table;
width: 100%;
}
.wrapper-div {
display:table-cell;
vertical-align: middle;
}
.button {
background: #e8e8e8;
display: block;
margin:auto;
font-size: 12px
position: relative;
}
You can remove margin:auto;from .buttonto only vertically center button
您只能margin:auto;从.button垂直中心按钮中删除
See on fiddle
在小提琴上看到
回答by Bibek Shah
You can use flexbox as shown below
您可以使用 flexbox 如下所示
.modal-footer {
background-color: #2A3E5D;
color: white;
height: 100px;
padding: 2px 16px;
display: flex;
align-items: center;
justify-content: center;
}
回答by bingo
This is one way of doing it.
这是一种方法。
.wrapper-div {
line-height: 60px; // ex: 60px, The button will center to line-height.
}
.wrapper-div button {
// height of button must be less than its parent.
height: 30px;
display: inline-block;
vertical-align: baseline;
}<div class="wrapper-div">
<button type="button" class="button"> Submit Filters </button>
</div>
<div class="wrapper-div">
<button type="button" class="button"> Submit Filters </button>
</div>