vertical-align 垂直对齐属性
封面图
•
2026-01-06
•
Html/Css
232
0
0
0
`vertical-align` 是 CSS 中用于控制 **行内元素**(如 `<span>`、`<img>`、`<input>` 等)在 **行框(line box)中的垂直对齐方式** 的属性。 --- ## 一、基本概念 - `vertical-align` 仅对 **行内元素** 或 **表格单元格(td, th)** 生效。 - 它不会影响块级元素(如 `<div>`、`<p>`)的垂直对齐,除非它们被设置为 `display: inline` 或 `display: inline-block`。 --- ## 二、常用值 | 值 | 描述 | |----|------| | `baseline` | 默认值。元素的基线与父元素的基线对齐。 | | `top` | 元素顶部与父元素的顶部对齐。 | | `middle` | 元素中部与父元素的中部对齐。 | | `bottom` | 元素底部与父元素的底部对齐。 | | `sub` | 元素作为下标对齐。 | | `super` | 元素作为上标对齐。 | | `text-top` | 元素顶部与父元素文本的顶部对齐。 | | `text-bottom` | 元素底部与父元素文本的底部对齐。 | | `percentage` | 百分比值,相对于字体大小。例如:`vertical-align: 50%` | | `length` | 具体长度值,如 `vertical-align: 10px` | --- ## 三、使用示例 ### 示例 1:图片和文字垂直对齐 ```html <p> <img src="icon.png" style="vertical-align: middle;" alt="Icon"> 这是一段文字 </p> ``` > 如果没有设置 `vertical-align`,图片默认会和文字的基线对齐,可能看起来有点“下沉”。 --- ### 示例 2:调整行内元素的垂直位置 ```css .inline-element { vertical-align: top; } ``` ```html <div style="height: 100px; line-height: 100px;"> <span class="inline-element">文本</span> </div> ``` > 此时 `.inline-element` 会与父容器的顶部对齐。 --- ## 四、常见应用场景 - 调整图片与文字的垂直对齐。 - 在表格中对齐单元格内容。 - 在导航栏中对齐图标和文字。 --- ## 五、注意事项 - `vertical-align` 不会影响元素的布局位置,它只是改变元素在行内的垂直位置。 - 对于块级元素,可以使用 `display: inline-block` 后再使用 `vertical-align`。 - 在 Flexbox 或 Grid 布局中,`vertical-align` 不起作用,应使用其他方式对齐。 --- ## 六、与 `line-height` 的区别 - `line-height` 控制的是 **行高**,即一行文字的高度。 - `vertical-align` 控制的是 **元素在行高中的垂直位置**。 --- 如果你有具体的使用场景或问题,欢迎继续提问!
上一篇:
mailto标签的用法
下一篇:
共识机制PoW
标题录入,一次不能超过6条
留言
评论