텍스트를 세로로 정렬하는 방법을 사용자 정의 CSS가있는 부트 스트랩?

Question

부트 스트랩에 맞춤 코드를 추가하려고했는데 프레임의 텍스트가 완전히 수직으로 배치되지 않았습니다.

코드는 매우 간단하고 거기에 몇 줄입니다,하지만 난 여전히 수직 중심으로 만들 수 없습니다, 여기가 jsfiddle처럼 보이는 방법은 다음과 같습니다 텍스트가 수직 중심으로된다 (

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

그것은 완벽하게 작동) 내가 부트 스트랩 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

대신 당신은 .init 클래스와 부트 스트랩의 기본 clases의 일부 속성을 무시하고이 같은 부트 스트랩 경고 메시지를 사용할 수 있습니다

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