css - 带有自定义css的引导程序如何垂直对齐文本？

Question

我试图向引导程序添加一些自定义代码，最后我在框架中的文本没有完全垂直居中。

代码非常简单，只有几行，但我仍然无法使其垂直居中，这是 jsfiddle 的样子：

http://jsfiddle.net/atJzD/1/

如果我不包含 bootstrap css，它可以完美运行（文本垂直居中），但我真的需要使用它。

.init {
    border:2px solid #EEEEEE;
    font:14px/1.3 Verdana,"Lucida Grande",Arial,Helvetica,Sans-Serif;
    margin:0px;
    padding:5px;
    min-width:120px;
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.taken span {background:none repeat scroll 0 0 #F08F78; }
.taken:hover{background:none repeat scroll 0 0 #FFC5B7;}

Answer 1

Use this and it works:

.init {
    border:2px solid #EEEEEE;
    font:14px/1.3 Verdana,"Lucida Grande",Arial,Helvetica,Sans-Serif;
    margin:0px;
    padding:5px;
    min-width:120px;
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.taken span {background:none repeat scroll 0 0 #F08F78; }
.taken:hover{background:none repeat scroll 0 0 #FFC5B7;}

p {
    margin: 0;
}

Answer 2

相反，您可以使用 .init 类覆盖默认引导类的一些属性，并使用如下引导警报消息：

.init {
    border:2px solid #EEEEEE;
    font:14px/1.3 Verdana,"Lucida Grande",Arial,Helvetica,Sans-Serif;
    margin:0px;
    padding:5px;
    min-width:120px;
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.taken span {background:none repeat scroll 0 0 #F08F78; }
.taken:hover{background:none repeat scroll 0 0 #FFC5B7;}

你能在这里查看演示吗