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