[英]Aligning a picture inside a div
I have an image inside a div.. the div has a background picture..and I am trying to move the image so that it is centered and have 3px margin from each side. 我在div内有一个图片。.div上有背景图片..并且我正在尝试移动图片,使其居中,并且每边有3px的边距。
My css: 我的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;
}
My html: 我的html:
<div id="user_avatar_background">
<image src="Images/user_pics/cypher.jpg" width="150px" height="150px" />
</div>
The picture wont move.. no matter how much margin, I give it.. 图片不会动..无论有多少余量,我都会给。
You are using an image
tag which is not a valid html tag. 您使用的
image
标签不是有效的html标签。 Try using img
. 尝试使用
img
。
CSS: 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: HTML:
<div id="user_avatar_background">
<img src="Images/user_pics/cypher.jpg" width="150px" height="150px" />
</div>
Similarly, you can remove the margin from the image and apply the padding to the div: 同样,您可以从图像中删除边距并将填充应用于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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.