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

在div中对齐图片

2 个答案: