내부에 절대 요소가 포함 된 이미지를 가운데에 배치하는 방법은 무엇입니까?

Question

내부에 절대 요소가 들어있는 이미지를 가운데에 배치하는 방법은 무엇입니까?

이미지에서 절대적인 요소를 배치 할 수 있었지만 지금은 이미지를 가운데에 놓고 싶습니다. 어떻게 ...?

HTML

<div id="image"> 
    <div id="the-image"> 
     <img src="..." width="..." height="..." alt=""> 
     <a href="..."><img src="" alt=""></a> 
    </div> 
</div> 

CSS

#image {background-color: red; float: left; width: 660px;} 

#the-image {display: inline-block; position: relative;} 
#the-image img {} 
#the-image a {position: absolute; bottom: 10px; right: 10px;} 

Answer 1

당신이

#the-image { 
    text-align: center; 
    display: block; 
} 

#the-image img { 
    display: inline-block; 
} 

을 할 수있는 : 예를 들어

이를 위해

#the-image img { 
    display: block; 
    margin: 0 auto; 
} 

하거나 당신은 당신의 이미지가 폭 속성이 설정되어 있는지 확인해야 할 것입니다 작동합니다.

---

편집 :

http://jsfiddle.net/uLX8g/3/

#the-image { 
display: block; /* changed from inline-block to block */ 
} 

#the-image img { 
    display: block; 
    margin: 0 auto; 
} 

Answer 2

몇 시간, 나는 해결책을 발견 한 후에 확인 ... 어떻게 내가 그것을 놓칠 수있다! 당신은 텍스트 정렬과 함께 DIV이있는 경우 : 센터 ;, 후 내부에 텍스트의 폭에 대하여 중심됩니다

솔루션이 다른 게시물은 말한다 https://stackoverflow.com/a/4980600/888139

에서입니다 그 컨테이너 요소. 인라인 블록 요소는이 목적을 위해 텍스트로 처리되므로 중심에 배치됩니다.

그래서 ID가있는 div를 만들려면 이미지 텍스트 정렬 센터 ... 그게 전부입니다.

<div id="image"> 
    <div id="the-image"> 
     <img src="..." width="..." height="..." alt=""> 
     <a href="..."><img src="" alt=""></a> 
    </div> 
</div> 



#image {background-color: red; float: left; width: 660px; text-align: center} 

#the-image {display: inline-block; position: relative;} 
#the-image img {} 
#the-image a {position: absolute; bottom: 10px; right: 10px;} 

Answer 3

나는 그것을 복잡하게 만들고 싶지 않습니다. 그러나 이것을 시도해보십시오. 그것이 효과가 있는지보십시오.

<div id="image"> 
    <center> 
     <div id="the-image"> 
      <img src="image.jpg" width="..." height="..." alt=""> 
      <a href="..."/><img src="" alt=""></a> 
     </div> 
    </center> 
</div> 

모든 것을 가운데에 맞출 필요가있는 경우에 대비합니다. :)