我怎么能用twitter bootstrap垂直对齐元素？

Question

我知道很多时候都会问这个问题，但解决方案都没有对我有用。我只想将一个标签对齐在一个与twitter-bootstrap类相关联的div中。但它没有一致。我尝试了水平对齐，它工作正常。没有bootstrap它工作正常，但使用bootstrap它停止工作。 知道它将如何运作？

Answer 1

代替标签

.center{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: table;
}
.center label {
    display: table-cell; 
    vertical-align: middle;
}

forked jsFiddle http://jsfiddle.net/s5dJH/

Answer 2

您可以line-height使用label并将其设置为与div相同的高度。这将完美地对齐。

请参阅this demo。

Answer 3

你去吧

使用

display:table;

和

display:table-cell;
vertical-align:middle;

这样，即使您调整框

，标签也始终居中

http://jsfiddle.net/s7Wb4/2/

Answer 4

试试这个

http://jsfiddle.net/s7Wb4/9/

.center{
width : 100px;
height : 100px;
display : table-cell;
float:none !important;
vertical-align : middle;
border : 1px solid red;
}