Выравнивание изображения внутри div

Question

У меня есть изображение внутри div. Div имеет фоновое изображение..и пытаюсь переместить изображение так, чтобы оно было центрировано и имело 3px-край с каждой стороны.

Мой CSS:

 #user_avatar_background 
     { 
      float:left; 
      margin:5px 15px 5px 0px; 
      margin-right: 10px; 
      width:200px; 
      height:200px; 
      background-image: url('image_files/avatar-background.gif'); 
      background-repeat: no-repeat; 
      overflow: hidden; 
     } 
     #user_avatar_background image{ 
      position:relative; 
      margin:3px 3px 3px 3px; 
     } 

Мой HTML:

<div id="user_avatar_background"> 
     <image src="Images/user_pics/cypher.jpg" width="150px" height="150px" /> 
    </div> 

картина обыкновение двигаться .. независимо от того, насколько запас, я даю ему ..

Answer 1

Вы используете image тег, который не является допустимым тегом html. Попробуйте использовать img.

CSS:

#user_avatar_background 
    { 
     float:left; 
     margin:5px 15px 5px 0px; 
     margin-right: 10px; 
     width:200px; 
     height:200px; 
     background-image: url('image_files/avatar-background.gif'); 
     background-repeat: no-repeat; 
     overflow: hidden; 
    } 
    #user_avatar_background img{ 
     position:relative; 
     margin:3px 3px 3px 3px; 
    } 

HTML:

<div id="user_avatar_background"> 
    <img src="Images/user_pics/cypher.jpg" width="150px" height="150px" /> 
</div> 

Answer 2

Кроме того, вы можете удалить край с изображения и применить отступы к DIV:

#user_avatar_background 
    { 
     float:left; 
     margin:5px 15px 5px 0px; 
     margin-right: 10px; 
     width:200px; 
     height:200px; 
     background-image: url('image_files/avatar-background.gif'); 
     background-repeat: no-repeat; 
     overflow: hidden; 
     padding: 3px; 
    } 
    #user_avatar_background image{ 
     position:relative; 
    }