vertical-align

游戏开发
2025-08-21 18:03:02

属性名： vertical - align 。作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。常用值： 1. baseline （默认值）：使元素的基线与父元素的基线对齐。 2. top ：使元素的顶部与其所在行的顶部对齐。 3. middle ：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。 4. bottom ：使元素的底部与其所在行的底部对齐。特别注意： vertical - align 不能控制块元素。 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vertical-align</title> <style> .wc1 { font-size: 100px; height: 300px; background-color: skyblue; } span{ font-size: 40px; background-color: orange; /* middle是元素的中部与父元素的基线加上父元素字母x的一半对齐 */ vertical-align: middle; } </style> </head> <body> <div> <p class="wc1">雨滴敲打着X<span>X窗户</span> </div> </body> </html> middle ：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。

baseline （默认值）：使元素的基线与父元素的基线对齐。

2. top ：使元素的顶部与其所在行的顶部对齐。

bottom ：使元素的底部与其所在行的底部对齐。

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vertical-align2</title> <style> div { font-size: 100px; height: 300px; background-color: skyblue; } img { height: 30px; vertical-align: top; } </style> </head> <body> <div> <p class="it1">拍打着沙滩 <img src="../imags/1.jpg" alt=""></p> </div> </body> </html>

标签：

vertical-align由讯客互联游戏开发栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“vertical-align”

上一篇
进程消亡（20250222）

下一篇
element-plus根据条件显示多选框