CSS vertical-align

这里的小空白就是为了和基线对齐

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直对齐方式</title>
  <style>
    div {
      border: 1px solid #000;
    }

    img {
      /* vertical-align: middle; */

      /* 顶对齐:最高内容的顶部 */
      /* vertical-align: top; */

      /* 底对齐:最高内容的底部 */
      /* vertical-align: bottom; */

      /* 因为浏览器把行内块、行内标签当做文字处理,默认按基线对齐 */
      /* 效果:图片img的底下有空白,转块级不按基线对齐,空白就消失了 */
      /* display: block; */
    }
  </style>
</head>
<body>
  <div>
    <img src="./images/1.webp" alt="">
    我是谁?我在哪?
  </div>
</body>
</html>

在 HTML 中,图片默认是按照基线对齐的方式来布局的,这是因为浏览器将图片视为一个内联元素,就像文字一样,所以会遵循内联元素的对齐规则。以下是具体原因:

  • 内联元素的特性:在 CSS 中,内联元素(如文字、图片等)通常会在一行内显示,并且它们的垂直对齐方式默认是基于基线的。基线是一条虚构的线,大多数字母都位于基线上或基线以上,字母的底部与基线对齐。
  • 兼容性和传统:这种基线对齐的方式是从早期的网页设计和浏览器渲染机制中继承下来的,为了保持与旧版本的 HTML 和 CSS 规范的兼容性,以及与大多数网页设计实践的一致性,浏览器一直沿用了这种默认的对齐方式。
  • 文本排版的一致性:将图片与文字的基线对齐有助于在文本段落中保持整体的排版一致性。当图片和文字在同一行时,它们的底部会大致对齐,使得文本流看起来更加整齐和自然。

vertical-align 是一个用于控制行内元素(如文本、图片、图标)在垂直方向上对齐方式的 CSS 属性。它主要用于调整元素在行高内的位置,或在行内格式化上下文中的对齐方式。

核心作用

  1. 行内元素对齐:控制元素(如文本、图片、图标)在行内的垂直位置。
  2. 表格单元格对齐:在表格中控制内容的垂直对齐方式。
  3. 与行高配合:常用于解决行内元素(如图片、图标)与文本基线不一致的问题。

注意事项

  1. 仅作用于行内元素vertical-align 只对 display: inlineinline-blocktable-cell 等行内元素有效,对块级元素无效
  2. 常见对齐问题 :图片底部留白通常是因为 vertical-align: baseline 默认值导致的,可以通过设置 vertical-align: bottomdisplay: block 解决。
相关推荐
晴殇i几秒前
一行代码生成绝对唯一 ID:告别 Date.now() 的不可靠方案
前端·javascript·面试
徐小夕4 分钟前
pxcharts-pro, 支持百万数据渲染的多维表格编辑器
前端·javascript·vue.js
独立开阀者_FwtCoder6 分钟前
Vue 3.6 将正式进入「无虚拟 DOM」时代!
前端·javascript·后端
山河木马12 分钟前
前端学C++可太简单了:-> 操作符
前端·javascript·c++
独立开阀者_FwtCoder18 分钟前
前端开发的你,其实并没有真的掌握img标签!
前端·vue.js·github
Deng94520131423 分钟前
快捷订餐系统
前端·css·css3
十五_在努力26 分钟前
参透JavaScript —— 花十分钟搞懂作用域
前端·javascript
前端小巷子31 分钟前
前端网络性能优化
前端·javascript·面试
晓得迷路了42 分钟前
栗子前端技术周刊第 89 期 - TypeScript 5.9 Beta、VSCode v1.102、Angular 20.1...
前端·javascript·typescript
Kagol1 小时前
2025年中总结:我想我克服公众演讲的恐惧了,一个社恐分子突破自我的故事
前端·开源