对齐一个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; 
    }