이미지의 가로 맞춤

큰 이미지를 가로로 가운데에 놓으려고합니다. HTML5를 사용 중이므로 <center>을 사용할 수 없습니다. left:400px을 사용할 수는 있지만 다른 화면 크기에서는 작동하지 않습니다.이미지의 가로 맞춤

출처

2013-07-09 user2563054

거짓입니다. 'center' 태그가 작동합니다. 더 이상 의미가 없습니다. HTML5는 좋은 이유로 인해 태그를 가치가 떨어 뜨렸습니다. –

사용 CSS text-align: center;. div에 너비를 설정하는 것도 잊지 말고 왼쪽 정렬로 보입니다.

<div style="text-align: center; width: 100%; border: 1px solid black;">Centered</div>

출처

2013-07-09 05:04:12 Dave

완벽하게 작동 해 주셔서 감사합니다. – user2563054

랩을하는 요소 내부의 이미지와 text-align: center;를 사용하여 ...

Demo

당신이 이미지 너비 무엇, 당신은 또한 display: block;와 margin: auto;를 사용할 수있는, 알고 또는 경우

<div class="center"> 
    <img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" alt="Google" /> 
</div> 

.center { 
    text-align: center; 
}

img 태그는 기본적으로 물론 inline 요소의 width 재산

0은 그대로

img { 
    width: 276px; 
    display: block; 
    margin: auto; 
}

Demo 2

출처

2013-07-09 05:04:21

"display : block;"대체 솔루션 및 "여백 : 자동;" 나를 위해 잘 일했다. 나도 몰라 –

당신의 element이 width 재산이있는 경우, 다음 margin:auto;에게 제공합니다.

출처

2013-07-09 05:04:46 Pumpkinpro

수평 센터

display: block;  
margin: 0 auto;

= 위쪽과 아래쪽 여백 0이 CSS를 시도하고 특정 상황에 따라 왼쪽과 오른쪽 여백 auto

출처

2013-07-09 05:05:34 Praveen

가 ..이 투표 한 사람 만이 완전히 잘못이다,'img'는 기본적으로 인라인 요소는, 당신은 마진'사용할 수 없습니다 : 0 자동;'Mr.Alien @ –

그것을 중앙에 그것은 나를 위해 일한 . [jsfiddle] (http://jsfiddle.net/8ajQJ/2/) – Praveen

에서 샘플을 가져 왔습니다. 디스플레이 블록을 사용하고 있기 때문에 답변에서 'display : block; '일하기 위해서 : –

, 이것은 여러 프로젝트에 나를 위해 일했다 :

<style> 
    .outer{float: left; position: relative; left: 50%;} 
    .inner{float: left; position: relative; left: -50%;} 
</style> 
<div class="outer"> 
    <div class="inner">content you want to center, image, text, whatevs</div> 
</div>

출처

2013-07-09 05:07:10 rncrtr

왼쪽과 왼쪽 여백이 (실제로는 서로에 대해) 같은 방식으로 작동하면서 약간 다른 방법이 있지만, 어떤 경우에는 제대로 작동하지 않는 이미지 크기의 정확한 절반을 설정합니다. – rncrtr

IMG 요소는 기본적으로 인라인입니다.

1) 인라인을 유지하고 text-align: center;를 사용 : 다른 사람이 지적 그래서, 당신은 두 가지 옵션이 있습니다.

2) display: block;으로 블록 요소로 만든 다음 블록 요소에서만 작동하는 margin: auto;을 사용하십시오. 나는이 해결책이 더 좋다고 생각한다. 너비를 설정하는 것은 블록 요소가되도록 강제하는 또 다른 방법 일 뿐이지 만 나중에 코드를 읽을 수있는 사람에게는 폭넓지 않습니다. 따라서 display 유형을 명시 적으로 block으로 설정하면 가독성을 높일 수 있습니다.

출처

2013-07-09 05:15:41 Marcovecchio

이미지의 가로 맞춤

답변

관련 문제