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