세로 및 가운데 맞춤 텍스트

body 내에 h1이 있고이 텍스트를 세로로 정렬하고 가운데 정렬하려고합니다.세로 및 가운데 맞춤 텍스트

position: absolute;을 사용하고 margin-top: "HALF OF HEIGHT";을 사용할 수 있지만이 h1은 새로 고침시 변경되고 다른 너비가 있음을 알고 있습니다. 높이는 항상 똑같아서 수직으로 정렬 할 수는 있지만 중심에 맞추는 것이 좋습니다. 나는 h1이 절대 위치에 배치되어 작동하지 않기 때문에 text-align: center;을 사용할 수 없습니다.

더 쉬운 방법이 있나요?

감사합니다.

출처

2012-07-31 Anonymous

다양한 텍스트 폭에 대해 'position : absolute'를 사용하여 가로로 가운데 맞춤을 할 수 없습니다. 그걸 제거 할 때의 문제점은 무엇입니까? – wanovak

나는'position : absolute'을 사용하여 수직으로 정렬했기 때문에. 높이는 60px이지만 폭은 알 수 없습니다. 지금 나는'position : absolute; 높이 : 60px; 상위 : 50 %; margin-top : -30px;'. –

감안할 요소가 배경이없는 것을, 당신이이 작업을 수행 할 수있는 수평 절대 위치를 가진 요소를 중심 :

.your-element { 
    position: absolute; 
    width: 100%; 
    text-align: center; 
}

작업 바이올린 : http://jsfiddle.net/VSySg/

출처

2012-07-31 19:55:23

아, 'width : 100 %'! 그 사실을 완전히 잊었습니다. 감사! 완벽하게 작동 했으므로 몇 분 안에 대답을 받아 들일 수 있습니다. 다시 한 번 감사드립니다! –

@JamieBrittain 도움이 되니 기쁩니다! –

나머지에을 따라 레이아웃의 경우 다음과 같이 작동 할 수 있습니다.

h1 { 
    display: block; 
    text-align: center; 
    line-height: /* height of container */ 
}

http://jsfiddle.net/xC3vn/

출처

2012-07-31 19:56:25 wanovak

'text-align : center;'에'width : 100 %;'를 추가해야했습니다. 고마워, 고마워! –

세로 및 가운데 맞춤 텍스트

답변

관련 문제