Html 如何垂直对齐动态div中的按钮中间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19649296/
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
How to vertical align middle a button in a dynamic div
提问by Bita Ho
I'd like to center a vertically aligned button in a div using bootstrap
我想使用引导程序将垂直对齐的按钮居中放置在 div 中
<div class="row" >
<div class="col-xs-2">
<button class="btn" style="color: #660066;">
<i class="fa fa-arrow-left" data-ng-click="onClickBack()" ></i>
</button>
</div>
<div class="col-xs-10">
<h4> {{rootNode.nodeName}}</h4>
</div>
</div>
As you see, I have two columns,one containing a button in the left, another containing Label. When label.length is increased then the div'll change the height -> I want the button to be always centered in the div.
如您所见，我有两列，一列包含左侧的按钮，另一列包含标签。当 label.length 增加时，div 会改变高度 -> 我希望按钮总是在 div 中居中。
回答by koala_dev
You can use display:inline-blockand vertical-align:middle:
您可以使用display:inline-block和vertical-align:middle：
.col-xs-2, .col-xs-10 {
display: inline-block;
float: none;
}
.col-xs-10 {
vertical-align: middle;
}
Here's a demo fiddle.
这是一个演示小提琴。
Though you will have to make sure to remove the white space in between the column <div>s in your markup. Refer to this answerfor more information on that.
尽管您必须确保删除<div>标记中column 之间的空格。有关更多信息，请参阅此答案。
回答by arn-arn
I used this. Check the "style property". That will do the trick.
我用过这个。检查“样式属性”。这样就行了。
style='position: absolute;top: 50%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%)'>
<span class='glyphicon glyphicon-refresh spinning'>
</span> Loading...</button>
回答by Zim
The problem is that the padding on the H4is more than the button. You can wrap you button inside the H4(perhaps not the best practice), or change the button padding in your CSS..
问题是上的填充H4不仅仅是按钮。您可以将按钮包裹在H4（可能不是最佳实践）中，或者更改 CSS 中的按钮填充..
<div class="row">
<div class="col-xs-2">
<h4>
<button class="btn" style="color: #660066;">
<i class="fa fa-arrow-left" data-ng-click="onClickBack()"></i>
</button>
</h4>
</div>
<div class="col-xs-10">
<h4> {{rootNode.nodeName}}</h4>
</div>
</div>
OR, leave the button as is, and apply this CSS to the H4..
或者，保持按钮不变，然后将此 CSS 应用到H4..
h4 {
margin-top: -0.5em;
}
