Posted on | by liu
CSS设置img标签位置
在网页设计中，你可能会需要在网页中插入图片。如何让图片位置在网页中的安放恰到好处，不会破坏网页的整体感觉呢？这就需要在CSS中设置img标签的位置。
首先大家来看一个img标签的基本格式：
<img src="图片路径" alt="图片描述" />
其中，
src属性指定了图片的路径和名称，
alt属性用来为图片添加描述信息。
在CSS中，通过设置img标签的
position和
top/
bottom/
left/
right属性值，可以控制图片在网页中的具体位置。下面是一些常用的设置方式：
* 图片居中，使用绝对定位
p {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
在这个例子中，大家先将图片设置为绝对定位，父元素设置为相对定位。然后通过设置
top和
left属性，将图片移动到父元素中央。
transform: translate(-50%, -50%);语句可以保证图片始终在水平和垂直方向上居中。
* 图片左浮动
img {
float: left;
margin: 0 10px 10px 0;
}
在这个示例中，大家使用了
float: left;属性将图片向左浮动，其余内容会自动环绕图片，形成比较整齐的页面布局。
margin: 0 10px 10px 0;属性表示图片的外边距为0，右边距为10px，下边距为10px，左边距为0。
* 图片右浮动
img {
float: right;
margin: 0 0 10px 10px;
}
这个例子与上面的左浮动示例类似，只是将图片向右浮动，并将外边距调整为右边距为0，下边距为10px，左边距为10px，上边距为0。
另外，还可以通过其他属性值和多种组合方式来控制图片的位置，例如
position: fixed;和
z-index: 1;属性可以实现图片的固定定位，
transform: rotate(30deg);可以实现图片旋转等效果。
以上是一些常见的图片位置设置方法。当然，具体使用时还需要根据实际需求来进行调整。