图像与边框对齐由vertical-align、display和父容器行高/布局共同决定；默认inline导致基线对齐而显下沉；可用vertical-align调整或改用display:block/Flex彻底解决。
图像与边框对齐不是靠 align 属性（它已废弃），而是由 CSS 的 vertical-align、display 和父容器的行高/布局模式共同决定的。
为什么 <img alt="HTML5图像位置怎么确定图像与边框对齐咋弄_边框对齐调整技巧【技巧】" > 总是和文字底部不对齐？
因为 <img alt="HTML5图像位置怎么确定图像与边框对齐咋弄_边框对齐调整技巧【技巧】" > 默认是 inline 元素，会像字母“g”“y”一样在基线（baseline）对齐——图像底边实际对齐的是文字的基线，不是底线，所以看起来“下沉”了。
-
vertical-align: baseline是默认值，造成视觉错位 - 父元素若有文字，行高（
line-height）会撑开包含区域，进一步放大错位感 - 加
border后更明显，因为边框把真实边界暴露出来了
快速解决：用 vertical-align 调整对齐方式
适用于行内上下文（比如图文混排），直接作用于 <img alt="HTML5图像位置怎么确定图像与边框对齐咋弄_边框对齐调整技巧【技巧】" > 标签本身：
<img src="icon.png" style="max-width:90%" alt="HTML5图像位置怎么确定图像与边框对齐咋弄_边框对齐调整技巧【技巧】" >
-
vertical-align: top→ 对齐父容器内容区顶部 -
vertical-align: middle→ 对齐父元素font-size的中线（非绝对居中） -
vertical-align: bottom→ 对齐父元素内容区底部（比baseline更直观） - 避免用
vertical-align: text-bottom，它仍受字体度量影响，不推荐
彻底摆脱对齐困扰：改用 display: block 或 Flex 布局
当图像不需要和文字同行显示时，这是最干净的解法——移除 inline 行为，让边框完全按盒模型渲染：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
<img src="logo.png" style="max-width:90%" alt="HTML5图像位置怎么确定图像与边框对齐咋弄_边框对齐调整技巧【技巧】" >
-
display: block让图像脱离文本流，border就能紧贴图像边缘 - 配合
margin: auto可水平居中（需有宽度限制或块级上下文） - 若需响应式居中 + 边框，用 Flex 更可靠：
div { display: flex; justify-content: center; align-items: center; border: 1px solid #ccc; }
边框本身“偏移”的真相：box-sizing 和 padding 干扰
有时你以为是图像没对齐，其实是边框加在了默认 content-box 模式下，导致整体尺寸变大、位置偏移：
- 默认
box-sizing: content-box：边框和 padding 会额外增加元素总宽高 - 加
box-sizing: border-box后，设定的width/height包含边框，位置更可控 - 别忽略
padding：哪怕只有padding: 0显式声明，也能防止某些 UA 样式干扰
真正难调的不是单张图，而是当图像嵌在段落、按钮或表格单元格里时，vertical-align 的生效范围会受父级 line-height、font-size 甚至相邻元素影响；这时候优先考虑降级为 block 或 Flex，比反复调试对齐值更省时间。
