div에있는 이미지의 중심을 너무 좁게 지정 했습니까?

Question

그래서 나는 비율 폭의 내 몸에 사업부를 가지고 있고, 그 내부에 인라인 스타일 사업부는 다음과 같이

text-align: center; margin-left: -15px; margin-right: -15px; overflow: hidden; 

당신이 볼 수 있듯이, 나는에 text-align: center; 이미지가 된 것입니다 경우 어떤이 div만큼 작 으면 이미지를 가운데에 배치하십시오. 하지만 너비가 div 인 것은 내 1280x800 화면에서 충분히 커지지 않을 것입니다.

음수 여백은 부모의 일부 패딩을 극복해야합니다. div. overflow:hidden은 내가 원하는 것처럼 보이게합니다. 지저분하지는 않습니다. 따라서 헤더 이미지 (onenaught.com)와 같이 원하는대로 작동합니다. 브라우저를 넓게 만들면 오른쪽에서 더 눈에 띄게되지만 중앙에 있지 않으므로 양쪽에서 확장되지는 않습니다.

이미지를 가운데 정렬 할 수있는 방법이 있는지 궁금합니다. 어떤 걸 알고 있니?

편집 : 페이지 here.

Answer 1

하나의 옵션은 절대적으로 이미지의 위치를 ​​left: 50%으로 지정하고 이미지의 너비 절반 만 이미지에 음수 여백을 사용하는 것입니다. 물론 이것은 포함 된 div의 위치 지정이 상대적인 또는 절대적으로 설정되어 이미지가 내부에 절대적으로 배치되도록 적절한 컨테이너 유형을 제공해야합니다.

이미지 태그를 사용하는 대신 다른 옵션을 사용하는 것이 좋습니다. 이미지를 부모 div의 배경으로 설정하고 background positioning CSS attributes을 가운데에 배치하면됩니다. 이렇게하면 절대 위치 지정을하지 않아도 중앙에 있는지 확인할 수있을뿐 아니라 자동으로 오버플로를 자르기 때문에 오버 플로우 특성이 필요하지 않습니다. 당신이 원하는 것을 얻기 위해)

사용 배경 위치를,

Answer 2

배경으로 이미지를 사용하는 것이 좋습니다.

일관된 크로스 브라우저를 달성하기 위해 자바 스크립트 솔루션을 필요로 할 수는 -100%에 이미지에 margin-left 및 margin-right를 설정하여

Answer 3

당신은 실제로이 작업을 수행 할 수있는 결과.

여기에 jsFiddle입니다. (아래에서 대신 사용하십시오.)

이미지의 margin-left 및 margin-right을 훨씬 더 큰 음수로 설정하는 것이 더 좋습니다.

margin-left: -100% + the div's width: 100% + margin-right: -100% = 3x div width

당신은을 확인할 수 있습니다 -9999%는 -100% 값으로, 이미지 요소를 포함하는 div 년대는 div의 3 배 폭보다 넓은있게되면 곧바로 오프 중심을 이동하기 시작 이 jsFiddle 사이의 동작의 차이와 오버플로를 표시로 전환하고 결과 창 크기를 보다 작은 div 미만으로 조정하면 이전 동작과의 동작 차이가 발생합니다.

(코멘트에서) 지원되는 브라우저의 범위에 @MaxOriola을 인용 :

나는 파이어 폭스, 크롬, 사파리 (마지막 버전) 및 익스플로러 8, 9 ... 두 번째 바이올린을 다시 테스트했습니다, 10. 모두 잘 작동합니다.

참고 이미지 요소 (래퍼 요소) 또는 inlineinline-block을 표시 text-align: center 수평 중심되어야한다.

// ALL of the JS below is for demonstration purposes only 
 

 
$(document).ready(function() { 
 
    $('a').click(function() { 
 
    $('body > div').toggleClass('overflow'); 
 
    }); 
 
})

img { 
 
    margin: 0 -9999% 0 -9999%; 
 
} 
 

 

 
/* ALL of the CSS below is for demonstration purposes only */ 
 

 
body { 
 
    text-align: center; 
 
    font-family: verdana; 
 
    font-size: 10pt; 
 
    line-height: 20pt; 
 
} 
 

 
body>div { 
 
    margin: 0px auto; 
 
    width: 40%; 
 
    background-color: lightblue; 
 
    overflow: hidden; 
 
} 
 

 
img { 
 
    vertical-align: top; 
 
} 
 

 
.overflow { 
 
    overflow: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>40% wide div [<a href="#">toggle overflow</a>] 
 
    <div> 
 
    <img src="http://lorempixel.com/400/200" /> 
 
    </div> 
 
    400px wide image 
 
</div>

Answer 4

나는 다른 해결책

<style type="text/css"> 
    .container { 
     width:600px; //set how much you want 
     overflow: hidden; 
     position: relative; 
    } 
    .containerSecond{ 
     position: absolute; 
     top:0px; 
     left:-100%; 
     width:300%; 
    } 
    .image{ 
     width: 800px; //your image size 
    }   
</style> 

및 컨테이너가 크거나 작을 때마다 당신의 이미지를 중심합니다 몸

<div class="container"> 
    <div class="containerSecond"> 
     <image src="..." class="" /> 
    </div> 
</div> 

에서

을 발견했다. 이 경우 이미지가 가운데에 맞춰지지 않을 경우 컨테이너의 300 %보다 커야하지만 그럴 경우 더 큰 두 번째 컨테이너를 만들면 작동합니다.

Answer 5

인 컨테이너 내부의 이미지는 transform입니다. 및 세트 폭 :

img { 
    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
    display: block; /* optional */ 
} 

jsFiddle here (I 감사 있도록 Mathijs Flietstra의 jsFiddle의 일부를 차용).