css盒子里图片位置

1. 居中对齐

img {
  display: block;
  margin: 0 auto;
}
 

可以让图片在CSS盒子中水平居中对齐。其中，margin: 0 auto;让图片的左右边距自适应，达到居中的效果。

2. 左对齐

img {
  display: block;
  float: left;
}
 

可以让图片在CSS盒子中左对齐。其中，float: left;让图片浮动到盒子的左侧。

3. 右对齐

img {
  display: block;
  float: right;
}
 

可以让图片在CSS盒子中右对齐。其中，float: right;让图片浮动到盒子的右侧。

4. 底部对齐

.container {
  position: relative;
  height: 500px;
}
img {
  position: absolute;
  bottom: 0;
}
 

可以让图片在盒子底部对齐。其中，container的高度需要设置为图片所在盒子的高度，而img的bottom属性设置为0，表示图片距离父容器底部的距离为0。

5. 顶部对齐

.container {
  position: relative;
  height: 500px;
}
img {
  position: absolute;
  top: 0;
}
 

可以让图片在盒子顶部对齐。其中，container的高度需要设置为图片所在盒子的高度，而img的top属性设置为0，表示图片距离父容器顶部的距离为0。

总之，在CSS盒子中设置图片的位置非常简单，只需要借助一些CSS属性就可以轻松实现。不同的图片位置设置样式可以让你的网页设计更加丰富，更具创意和美感。