vertical-align 文本垂直对齐
只对 display 的计算值为 inline、inline-block,inline-table 或 table-cell 的内联元素有效。( 浮动和绝对定位会让元素块状化,从而导致 vertical-align 失效)
属性值
- 线类,如baseline(默认值-基线对齐)、top(顶部对齐)、middle(居中对齐)、bottom(底部对齐);
- 基线对齐
- 在文本之类的内联元素,基线是字母x的下边缘
- 对于图片等替换元素,基线为元素本身的下边缘
- 一个inline-block元素,如果里面没有内联元素,或者overflow不是visible,则该元素的基线就是其margin底边缘;如果里面有内联元素,则其基线是元素里最后一行内联元素的基线。
- 文本类,如text-top、text-bottom;
- 上标下标类,如sub、super;
- 数值类,正值或负值,如-80px、20px、2em等。
- 负值全部都是往下偏移,正值全部都是往上偏移,而且数值大小全部都是相对于基线位置计算的,因此,从这一点来看,vertical-align:baseline等同于vertical-align:0。
- 由于是相对字母x的下边缘对齐,而中文和部分英文字形的下边缘要低于字母x的下边缘,因此,会给人感觉文字是明显偏下的,一般都会进行调整。比方说,我们给文字内容设置vertical-align:10px,则文字内容就会在当前基线位置再往上精确偏移10px
- 百分比类,正值或负值,如20%等,vertical-align属性的百分比值则是相对于line-height的计算值计算的,但很少使用。
【演示】文本和图片垂直方向对齐
要点:在图片上设置 vertical-align 样式
https://www.runoob.com/try/try.php?filename=trycss_vertical-align
text-align 文本水平对齐
- 在容器上添加样式
属性值
值 | 描述 |
left 【默认】 | 把文本排列到左边。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 文本两端对齐 |
【实战】单行文本垂直居中
【实战】多行文本垂直居中
借助 CSS 的 行距上下等分机制
,利用行高实现。
【实战】块级元素水平居中
【实战】块级元素水平垂直居中
方案:flex布局
多行块级元素的水平垂直居中
方案:flex布局 + 自动外边距
方案:单元格布局 + 自动水平外边距
方案:子绝父相 + 上下左右0 + 自动外边距
方案:子绝父相 + transform: translate
方案:子绝父相 + margin 偏移
仅适用于子元素有明确宽高的情况,因需手动计算偏移距离,不推荐使用。
【实战】图片在 div 内水平垂直居中
方案:flex布局
父元素采用 flex布局后,img 的 display 变成了 block
方案:flex布局 + 自动外边距
方案:单元格布局 + 文本水平居中
方案:子绝父相 + 上下左右0 + 自动外边距
方案:子绝父相 + transform: translate
方案:子绝父相 + margin 偏移
仅适用于子元素有明确宽高的情况,因需手动计算偏移距离,不推荐使用。
方案:行高与容器等高 + 文本垂直居中对齐
【实战】文本自适应对齐
文本宽度小于容器宽度时居中对齐,文本宽度大于容器宽度时居左对齐
【实战】图标和文本对齐
- 文字和图标垂直居中对齐(四种方法)
- 使用ex实现文本与图标对齐
【实战】图片和文本对齐