2012-05-09 3 views
1

로고가있는 이미지가 하나만있는 자리 표시 자 (공사중) 사이트가 있습니다. 나는 마진 : 0 자동으로 수평 정렬. 그러나 이미지를 추가로 가로로 정렬하는 방법을 알 수 있습니까? 또는 한 문장으로 어떻게 이미지를 완전히 집중시킬 수 있습니까?이미지의 세로 및 가로 맞춤

Look here to see live: fiddle

감사 보도

EDIT : 들어 1 : 2 (높이 대 폭) 이미지가 사용 연결된 글 등

#wrapper img 
{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 799px; 
    height: 404px; 
    margin: -202px -399px 0; 
    border: 1px solid black; 
} 

:)

,210

는 다음과 같은 규칙에 이미지를 저장할 사업부를 가지고 도움

+1

마크 업을 게시 할 수 있습니까? – fcalderan

+0

http://jsfiddle.net에 코드를 게시하십시오 – Jhilom

답변

1

음 ... 시도해 보셨습니까?

<div class='placeholder'> 
    <img src='../images/myimage'> 
</div> 

그리고 페이지의 중심에 이미지를 지참 마크 업

.placeholder 
{ 
position : absolute; 
top : 50%; 
left : 50%; 
width : 200px; /* Width of the image in question */ 
height : 200px;/* height of the image in question */ 
margin : -100px 0px 0px -100px; 
} 

이의 CSS.

+0

안녕하세요, 이것은 너비가 1 : 1에서 너비가 1 인 제곱에 대해 1 : 2입니다 (이걸 알 수는 없습니다 ...). 나는 결과를 바이올린으로 여는 포스트를 본다. – bodokaiser

0

주셔서 감사합니다 : 이것은 할 것

margin-left: auto; 
margin-right: auto; 
margin-top:200px; <!-- Will depend on your image --> 
width:[your-image-width]px; 

이 이미지

+0

가로로만. 영업 이익은 수직적으로 원한다. 제목을 참조하십시오. –

+0

실례합니다. 편집을 참조하십시오. 이것은 그가 원하는 것을 할 것이며, 마진 상위 규칙을 따라야 할 것입니다. – dtsg

1

을 중심 것인가 그것을

img#logo { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100px; 
    height: 100px; 
    margin-left: -50px; 
    margin-top: -50px; 
} 

http://jsfiddle.net/DxByM/

+0

안녕하세요, 이것은 너비가 1 : 1에서 너비가 1 인 제곱에 대해 1 : 2입니다 (이 사실을 알 수 없음). 나는 그 결과를 fiddled했다. 오프닝 포스트 – bodokaiser

+0

그냥 너비, 높이 및 여백을 맞게 변경, 여백 - 왼쪽 너비의 절반이어야합니다 여백 - 가기 높이의 절반이어야합니다. – trapper

관련 문제