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

【问题标题】：Bootstrap with custom css how to align text vertically?带有自定义css的引导程序如何垂直对齐文本？
【发布时间】：2013-08-11 00:41:17
【问题描述】：

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

代码很简单，只有几行，但我还是不能让它垂直居中，下面是 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;}

【问题讨论】：

标签： css twitter-bootstrap alignment center

【解决方案1】：

相反，您可以使用 .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;}

你能看演示吗Here

【讨论】：

【解决方案2】：

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;
}

【讨论】：