CSS高级技巧⑤——vertical-align的使用

小波

1年前更新

390

文章目录[隐藏]

常用例子——图片和文字中线对齐：
- 源码：
图片地侧空白缝隙解决方法：
- 方法一(推荐)：
- 方法二：

vertical-align 是一个 CSS 属性，用于指定行内元素或表格单元格中内容的垂直对齐方式。

它可以应用于以下元素：

行内元素（如文字、图片等）
表格单元格（<td> 或 <th>）

vertical-align 属性接受以下常见的属性值：

baseline：默认值，将元素与基线对齐。
top：将元素的顶部与父容器或同行元素的顶部对齐。
middle：将元素的中心与父容器或同行元素的中心对齐。
bottom：将元素的底部与父容器或同行元素的底部对齐。
text-top：将元素的顶部与父容器中的文本的顶部对齐。
text-bottom：将元素的底部与父容器中的文本的底部对齐。

此外，vertical-align 属性还接受其他一些特定于表格布局的属性值，如 sub、super、middle、text-top 和 text-bottom 等。

请注意，vertical-align 属性对块级元素无效，因为块级元素的高度由其内容和样式规则决定，而不受 vertical-align 影响。

常用例子——图片和文字中线对齐：

通过vertical-align:middle可以实现图片和文字垂直居中效果。

源码：

<head>
    <style>
        img {
            width: 100px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <img src="https://blog.zmkj.website/wp-content/uploads/2022/11/zmkj-logo.png" alt="造梦空间论坛">
    造梦空间论坛
</body>