CSS学习笔记DAY7之对齐

在CSS中，对齐是一个非常常见的需求，我们可以通过多种属性来实现水平或垂直对齐。

1. 水平对齐

• text-align: 用于水平对齐文本，常用的值有left、right、center和justify。

.text-left {
  text-align: left;
}
 
.text-right {
  text-align: right;
}
 
.text-center {
  text-align: center;
}
 
.text-justify {
  text-align: justify;
}

• justify 可以使文本两端对齐，但它不会增加任何空白，只能在英文中使用。

2. 垂直对齐

• vertical-align: 用于垂直对齐内联元素或表格单元格中的元素，常用的值有top、middle、bottom、text-top、text-bottom和baseline。

.align-baseline {
  vertical-align: baseline;
}
 
.align-top {
  vertical-align: top;
}
 
.align-middle {
  vertical-align: middle;
}
 
.align-bottom {
  vertical-align: bottom;
}
 
.align-text-top {
  vertical-align: text-top;
}
 
.align-text-bottom {
  vertical-align: text-bottom;
}

• 对于块级元素，可以使用flexbox或CSS Grid来实现垂直对齐。

3. Flexbox垂直对齐

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

4. CSS Grid垂直对齐

.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}

以上就是CSS中对齐的一些常用方法，你可以根据实际需求选择合适的对齐属性。