기본 응답 페이지 중심 콘텐츠

Question

웹 페이지가 있으며 Jquery 모바일을 사용하고 있습니다.

나는 이미지와 언 텍스트를 가지고 있으며, 내 페이지를 수평으로 그리고 수직으로 센터링하고 싶습니다. 그리고 창 너비를 수정할 때, 컨텐트가 적응해야합니다.

예에서

, 내용이 제대로 적응할 수 있지만 중심 아니에요 : 여기

는 an example입니다. 나는 내 콘텐츠 DIV의 스타일 설정 한 경우 : 내 사업부에

style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;width: 500px;" 

을, 내용이 중심이지만 더 이상 적용되지 않습니다 ...

당신은 내 jsfiddle 내가 무엇을해야 할 업데이트 할 수 있습니까?

Answer 1

바깥쪽에는 display: table;, 안쪽에는 display:table-cell으로 작업하면 수직으로 가운데 맞추기 작업을 할 수 있습니다. 이 체크 아웃 :

http://jsfiddle.net/NrCGb/578/

편집 최대 콘텐츠에 대한 500 픽셀 폭 :

http://jsfiddle.net/NrCGb/585/

Answer 2

(예 : 502 Bad Gateway) jQuery Mobile은 사용자 정의에 적합하지 않습니다. 그대로 사용하거나 전혀 사용하지 마십시오. 두 개의 프로젝트가 끝난 후에는 아무런 도움이되지 않고 두통 만 느껴집니다. 함께 시도해보십시오.

Answer 3

이 작동합니다

#content { 
    margin: auto; 
    position: absolute; 
    top: 50%; 
    margin-top: -250px; 
    left: 0; 
    right: 0; 
    text-align: center; 
    height: 500px; 
} 

http://jsfiddle.net/wesleysmits/NrCGb/581/

이 문서에 유용 할 수 있습니다뿐만 아니라 http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

이 유래 스레드는 또한 당신을 도움이 될 수 있습니다. Center a DIV horizontally and vertically