text-align,vertical-align,line-height居中布局笔记

### 居中布局知识点详解：`text-align`, `vertical-align`, `line-height` #### 一、`text-align`属性 `text-align`属性用于设置文本的水平对齐方式。它可以应用于大多数包含文本的元素，例如段落（`<p>`）、标题（如`<h1>`到`<h6>`）等。 **主要值及其含义：** - **left**：左对齐（默认） - **right**：右对齐 - **center**：居中对齐 - **justify**：两端对齐（使每一行文字两端对齐） 在实际应用中，当希望页面中的文本或一系列元素水平居中时，可以将`text-align`设置为`center`。需要注意的是，如果目标元素是块级元素（例如`<div>`），那么设置`text-align`仅会影响到该元素内部的行内元素（如`<span>`、图片`<img>`等）。 #### 二、`vertical-align`属性 `vertical-align`属性主要用于调整行内元素（如`<span>`、`<img>`）或使用`display: inline-block`的元素在其父元素中的垂直位置。对于块级元素（如`<div>`），通常需要通过其他方法来实现垂直居中。 **主要值及其含义：** - **baseline**：基线对齐（默认） - **top**：顶部对齐 - **middle**：居中对齐 - **bottom**：底部对齐 **示例代码：** ```css div { display: inline-block; vertical-align: middle; } ``` 如果想要让多个`<div>`元素在同一行中居中对齐，可以将它们的`display`设置为`inline-block`，并设置`vertical-align`为`middle`。需要注意的是，当使用`vertical-align: middle`时，通常还需要配合`line-height`属性来确保元素能够完全居中。 #### 三、`line-height`属性 `line-height`属性用来控制行间距，即行与行之间的垂直距离。对于单行文本，还可以利用这个属性实现垂直居中。 **主要用途：** 1. **行间距控制**：通过设置`line-height`来控制文本行之间的间距。 2. **垂直居中**：在单行文本中，可以通过设置`line-height`等于元素的高度来实现垂直居中。 **注意事项：** - 当元素高度固定时，设置`line-height`为该高度的值可以实现内容的垂直居中。 - 如果元素的高度不是固定的，或者元素中包含多行文本，则`line-height`无法实现准确的垂直居中。 - 对于`inline-block`元素，`line-height`只会影响文本部分的垂直位置，而不会影响整个元素的位置。 **示例代码：** ```css div { height: 100px; line-height: 100px; vertical-align: middle; } ``` ### 其他注意事项 - 使用`line-height`进行垂直居中时，需要确保元素的高度固定且已知。 - `vertical-align: middle`只有在行内元素或`inline-block`元素中才有效。 - 当需要对`inline-block`元素进行垂直居中时，除了设置`vertical-align: middle`之外，还应考虑`line-height`的影响。 - `line-height`属性也可以应用于`<p>`、`<div>`等元素，但要注意它只影响其中的行内元素。 通过合理地使用`text-align`、`vertical-align`和`line-height`属性，可以有效地实现文本和元素的居中布局。这三种属性在不同的场景下有着各自的作用，理解它们的特点并加以灵活运用，可以帮助开发者更好地控制页面布局，提升用户体验。