CSS를 사용하여 화면 중앙에 이미지 배치 - 임의 화면/이미지 크기

이 질문의 목적을 위해 하나의 이미지가 화면의 중앙에 수직 및 수평 가운데에 집중되어 있어야합니다. 그것은 다음의 요건 가지고CSS를 사용하여 화면 중앙에 이미지 배치 - 임의 화면/이미지 크기

클라이언트의 화면 크기
이미지는 사용자가 정의되며, 따라서 화상을 완벽하게 중심해야
알 사이즈이다 (모바일) 불명를 모두 상하 수평으로 모든 장치에서
이미지 중심이

는 CSS의 newb의 비트가되는 (즉, 세로에서 가로) 화면 회전을 지속해야한다, 내가 가서이 유일한 창조 방법은 자바 스크립트를 사용하여 콘텐츠를 배치하는 방법을 알고 있습니다. http://jsfiddle.net/error454/8YL9a/

내 솔루션과 동일하게 작동하지만 하드 방정식 대신 CSS를 사용하는 솔루션을 찾고 있습니다.

출처

2012-03-28 Error 454

입니까? – MrGrigg

내가 본 것은 내가 정말로 만들어야 할 빙산의 일각이다. 자바 스크립트와 수많은 마법 계산을 사용하면 평생 동안 제품 소유자가 될 것입니다. 나는 어떤 웹 개발자라도 내 부재에서 유지할 수있는 것을 선호 할 것이다. –

display:-webkit-box; 
-webkit-box-orient:horizontal; 
-webkit-box-pack:center; 
-webkit-box-align:center; 

display:-moz-box; 
-moz-box-orient:horizontal; 
-moz-box-pack:center; 
-moz-box-align:center;

CSS3 속성, 잘못된 지원 : webkit, mozilla. JS가없는 깨끗한 마크 업과 CSS 만 있으면됩니다.

편집 1 : http://jsfiddle.net/t8qtn/6/

편집 2 : 미래 교정를 들어, prefixless 버전은 자바 스크립트 대신 순수 CSS를 사용의 이점은 무엇입니까

display:box; 
box-orient:horizontal; 
box-pack:center; 
box-align:center;

출처

2012-03-28 21:59:06 mddw

유연한 박스 모델 여기에와 있습니다! –

이 중심에 좋은 기사입니다 : http://www.w3.org/Style/Examples/007/center.en.html

이

그것은 무언가 같이해야한다 :

<img class="vcenter hcenter" src="..."/>

업데이트 : 다음

.vcenter { display:table-cell; vertical-align:middle; } 
.hcenter { display:block; margin-left:auto; margin-right:auto; }

그리고이 이미지에 두 클래스를 적용하면 수 단순히 여기 같은 표를 사용하십시오 http://www.sorinvasilescu.ro/

출처

2012-03-28 21:34:51 evilpenguin

작동하지 않습니다 : http://jsfiddle.net/error454/t8qtn/ –

업데이트 : 테이블을 사용할 수는 있지만 연령대에 따라 레이아웃 목적으로 사용되지 않을 것으로 간주되었습니다 ... – evilpenguin

CSS를 사용하여 화면 중앙에 이미지 배치 - 임의 화면/이미지 크기

답변

관련 문제