이미지 중앙에

Question

이미지를 수평으로 정렬하려고합니다. 그러나 그것은 페이지의 왼쪽에서 움직이지 않습니다. 필자의 경우 This answer이 작동하지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

#container {     
     width: 100%;   
     border: 2px yellow dashed; 
     height: 100px; 
} 

#profile-image img{ 
    margin-left: auto; 
    margin-right: auto; 
    border: 2px orange solid; 
} 

마이 페이지 :

<div id="container"> 
      <div id="profile-image"> 
       <p><img src="<?php echo $data['profile_image_url'];?>" alt="me"></p> 
      </div> 

Answer 1

수평 중앙에있는 사업부 또는 아무것도를 만들기 위해, 일반적인 CSS 방식은 될 것 폭을 가지고 margin:0 auto;을 선언 할 수 있습니다

#profile-image{ 
    width:400px; 
    margin:0 auto; 
} 

Answer 2

이 시도 : http://jsfiddle.net/rua4d/2/

#container {     
    width: 300px;   
    border: 2px yellow dashed; 
    height: 100px; 
    display:table-cell; 
    position:relative; 
    vertical-align:middle; 
} 


#profile-image img{ 
    margin-left: auto; 
    margin-right: auto; 
    border: 2px orange solid; 
    display:block; 
    position:relative; 
    vertical-align:middle; 
    text-align:center; 
    width:50px; 
} 

Answer 3

display:block

을 이미지 스타일에 추가하기 만하면됩니다. 이미지는 인라인 요소이며 인라인 요소는 여백을 무시합니다.

Answer 4

왜이 기능이 작동하지 않습니까?

#profile-image p { text-align: center; } 
#profile-image img { display: inline; } 

대신 inline-block을 필요 당신이 text-align: center와 함께 작동하도록 여백을하려면 .. 폭을 지정할 필요가 없습니다 그 방법 :

#profile-image p { text-align: center; } 
#profile-image img { display: inline-block; }