CSS를 사용하여 텍스트를 색상이 지정된 div에 수직으로 정렬하는 방법은 무엇입니까?

Question

텍스트를 특정 높이의 div에 세로로 정렬해야합니다.

#titleBox 농업에서 추진 투자 : 당신이 볼 수 있듯이 나는 텍스트를 포함 #titleBox 사업부가 http://onofri.org/example/example3/

:

당신은 당신이 내 문제를 볼 수 있습니다 여기 경우의 높이는 40px입니다. 녹색 div의 텍스트를 가운데에 정렬하는 방식으로 세로로 정렬하고 싶습니다.

이 내 HTML과 CSS 코드 만 잘 작동하지 않습니다

<div id="container"> 


    <div id="titleBox"> 
     <p id="myTitle">Promoting Investment in Agriculture</p> 
    </div> 


</div> 

#titleBox{ 
    margin: 0 auto; 
    width: 350px; 
    background-color: #6da662; 
    height: 40px; 
    vertical-align: middle; 
} 



#myTitle{ 
    /* consente di posizionare un elemento al centro del suo contenitore */ 
    margin: 0 auto; 
    overflow: hidden; 
    color: #fff; 
    font-size: 16.5px; 
    font-weight: bold; 
    text-align: center; 
} 

내가 해결해야 할? #myTitle에 이러한 스타일을 추가 할 수

TNX

안드레아

Answer 1

시도 :

vertical-align: middle; 
line-height: 40px; 

Answer 2

는 여기에 또 다른 해결책 - 페이지에 이러한 스타일을 추가합니다. 디스플레이에 익숙해 져야합니다. 수직 중심 맞춤을위한 table-cell 속성입니다.

#titleBox{ 
    display:table; 
} 

#myTitle{ 
    display:table-cell; 
    vertical-align: middle; 
} 

Answer 3

정말 간결하고 싶은 경우에, 당신은 하나 개의 요소에서 모든 작업을 수행 할 수 있습니다

<div id="titleBox">Promoting Investment in Agriculture</div> 

다음과 같은 CSS 적용

#titleBox { 
    margin: 0 auto; 
    width: 350px; 
    background-color: #6da662; 
    line-height: 40px; 
    vertical-align: middle; 
    text-align: center; 
    color: #fff; 
    font-size: 16.5px; 
    font-weight: bold; 
} 

참조 바이올린 : http://jsfiddle.net/audetwebdesign/2PxsZ/

을