div에 텍스트의 가운데 맞추기 방법

Question

텍스트를 가로 및 세로로 정렬하려고합니다. 가로 축을 사용하여 다음과 같이 만들었습니다.

text-align: center; 

그리고 완벽하게 작동했습니다. 그러나 텍스트를 세로축의 중심에두기를 원합니다. ...

http://jsfiddle.net/QLPTD/1/

감사합니다 나는 솔루션을 많이 읽었습니다,하지만 모두가 서로 다른 솔루션을 가지고 있으며, 나는 조금 혼란 스러워요! 당신이 할 수있는

Answer 1

그런데 한 가지

line-height: 25px; 

당신은 높이를 제공하지 않으며, 대신 높이가 자동으로 설정됩니다. 시도해 볼 수 있습니다. 대부분의 시간 동안 저에게 도움이됩니다.

Answer 2

CSS에는 vertical-align 속성이 있지만 약간 어렵습니다.

자세한 내용은 this page을 참조하십시오.

display: table; 속성이있는 외부 div가 있고 내부 테이블이 display: table-cell;입니다. 그런 다음 내부 div에서 vertical-align: middle;을 수행 할 수 있습니다. 모든 스타일이 바깥 쪽 div에 적용됩니다.

HTML

<div id="outer"> 
    <div id="menu_secciones" > 
      Hello! 
    </div> 
</div>​ 

당신은 당신의 이점에 패딩을 사용하여 고려할 수

#outer { 
    display: table; 
    background-color: #dddddd; 
    position: absolute; 
    left: 0; 
    height: 50%; 
    width: 100%; 
    top: 10%; 
} 
#menu_secciones 
{ 
    text-align: center; 
    display:table-cell; 
    vertical-align:middle; 
}​ 

DEMO

Answer 3

CSS : http://jsfiddle.net/QLPTD/15/

당신이 텍스트를 세로로 정렬 할 경우

는만큼 당신의 패딩 정상 및 패딩 바닥이 같은 사람들을 그리고 당신이 당신의 디스플레이와 높이가 적절하게 설정되어로, 당신의 텍스트는 같은 사용해야 수직

Answer 4

을 중심으로 한 것으로 나타났습니다한다 선 높이와 높이. 당신은 단지 한 줄의 텍스트를 가질려고하는 경우에

http://jsfiddle.net/QLPTD/7/

Answer 5

라인의 높이 만 좋은 솔루션입니다. 언급 된 방법 슬레이어도 또 다른 가능한 옵션입니다. 당신이 그것을 할 수있는 또 다른 방법은

<div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu massa nisi, pharetra elementum felis. Donec iaculis eros eu sapien pharetra tempor</p> 
</div> 


<style type="text/css"> 

    div { 
    width:300px; 
    height:300px; 
    border:1px solid red; 
} 

p { 
    display:block; 
    width:300px; 
    border:1px solid black; 
    position:absolute; 
    top:28%; 
    text-align:center; 
} 

</style> 

상단 %는 콘텐츠에 따라 달라질 것입니다 .... 예를 들어 ... 절대 위치를 사용하는 것입니다. 내 문제를 정확히 맞지 않도록

http://jsfiddle.net/krishollenbeck/gHXf7/