Bootstrap с пользовательским CSS, как выравнивать текст по вертикали?

Question

Я пытался добавить некоторый пользовательский код в bootstrap, и в конце мой текст в кадре не был полностью вертикально центрирован.

код очень прост, и есть только несколько строк, но я все еще не мог сделать его вертикально по центру, вот как это выглядит 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

Вместо этого вы можете переопределить некоторые свойства по умолчанию clases бутстраповского с .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

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