한 페이지의 중심에 항목 중앙 맞춤

페이지의 중심에 큰 텍스트를 넣으려고합니다. 나는 단지 페이지 안에 바디 태그를 원한다. (선호). 나는 display: table-cell을 사용하고 middle에 vertical-alignment 설정을 시도했다하지만 그때 나는이 문제를 해결하지만 난 그게 더 큰 글꼴 작동하지 않습니다 실현 유래에 대한 또 다른 질문을 발견 height: 100%한 페이지의 중심에 항목 중앙 맞춤

작동하지 않았다. 이것은 내가 지금까지 가지고있는 것입니다 : http://jsfiddle.net/aECYS/

출처

2013-01-03 Xecure

상사? margin : auto로 설정하십시오. – Raptor

바이올린을 보면 그들은 그렇게했습니다. 문제는 그들이 더 많은 일을했다는 것입니다. 그리고 "dead center"는 왼쪽/오른쪽이 아닌 위/아래를 의미합니다. 특히 쓴 코드를보고 "top : 50 %"가 표시되면 – Popnoodles

푸시 가기 DIV 폭에 기초 남기고 텍스트 중심 높이를 지정합니다.

CSS

body{ background-color: #000;} 
    div{ 
     background-color: #000; 
     width:800px; 
     height: 200px; line-height: 200px; 
     position: absolute; 
     top: 50%; margin-top:-100px; 
     left: 50%; margin-left:-400px; 
     font-weight: bold; 
     font-size: 100px; 
     text-transform: uppercase; 
     color: #ccc; text-align:center 
    }

DEMO

출처

2013-01-03 07:35:25 Sowmya

당신의 CSS는 다른 화면 크기 및 장치에 맞게 조정합니까 ??? – Dineshkani

@Dinesh yup .... – Sowmya

참고 : '줄 높이'로 인해 1 줄의 텍스트에서만 작동합니다. 그래도 좋은 해결책 +1 –

당신의 위치가 절대적이라면 당신은 텍스트를 원하는 곳 어디로나 옮길 수 있습니다.

참고 : 절대 배치 된 요소는 다른 요소와 겹칠 수 있습니다. 100 %

width: 100%; 
height: 100%; 
position: absolute; 
top: 50%; 
left: 50%;

같은

position: absolute; 
top: 37%; 
left: 34%;

See Demo

세트의 폭과 높이를 그 후 다른 화면 크기

출처

2013-01-03 07:32:05 Dineshkani

다른 화면 크기와 장치는 어떻습니까? – Amyth

위쪽 및 왼쪽 위치 만 올바르게 설정합니다. – Dineshkani

왜 -1 그 대답을 말할 – Dineshkani

한 페이지의 중심에 항목 중앙 맞춤

답변

관련 문제