[分享]css中div怎么上下左右

在CSS中，使用div元素可以将网页分隔成独立的区域。可以使用CSS对div元素进行布局和样式的设计。 我是div1 我是div2 我是div3 我是div4 以上代码是一个四个div元素的容器（c...

在CSS中，使用div元素可以将网页分隔成独立的区域。可以使用CSS对div元素进行布局和样式的设计。

<div class="container">
  <div class="box1">我是div1</div>
  <div class="box2">我是div2</div>
  <div class="box3">我是div3</div>
  <div class="box4">我是div4</div>
</div> 

以上代码是一个四个div元素的容器（container），每个div元素都有不同的类名。接下来可以使用CSS来设置这些div的位置。

向上对齐

可以使用CSS的属性vertical-align来实现div向上对齐。例如下面代码：

.box1 {
  vertical-align: top;
} 

向下对齐

同理，可以使用vertical-align实现向下对齐：

.box2 {
  vertical-align: bottom;
} 

居中对齐

可以使用text-align和line-height属性来实现div的居中对齐：

.container {
  text-align: center;
  line-height: 200px; /*根据最高的div高度设置*/
} 

左对齐和右对齐

可以使用float属性来实现div的左对齐和右对齐：

.box3 {
  float: left;
}
.box4 {
  float: right;
} 

以上就是div元素在CSS中实现上下左右对齐的方法。