Центр изображения

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; 
} 

MyPage:

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

Answer 1

сделать любой DIV или что-нибудь по горизонтали в центре, общий 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; } 

таким образом вам не нужно будет указывать ширину .. если вы хотите поля, чтобы работать вместе с text-align: center вам нужно будет inline-block вместо:

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