legend默认居中不依赖text-align，靠右对齐最可靠方案是fieldset设position:relative、legend设position:absolute+right:0+top:-0.5em+transform:translatex(50%)。

fieldset 的 legend 默认居中，但不是用 text-align 控制的

很多人直接给 <legend></legend> 加 text-align: right 或 margin-left: auto，发现完全没反应——这是因为 <legend></legend> 在 <fieldset></fieldset> 中有特殊渲染逻辑：它被当作 fieldset 的「标题框」，浏览器会自动将其定位在 border 顶部中央（或左侧/右侧，取决于 direction 和 text-align 的组合），但这个位置不响应常规块级对齐方式。

靠右对齐 legend 的可靠写法是用 position + transform

最兼容、最可控的方式是脱离文档流后手动定位。注意必须同时设置 position: relative 在 <fieldset></fieldset> 上，再对 <legend></legend> 做绝对定位：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

选项设置

启用功能

• top: -0.5em 是为了把 legend 拉回 border 上方（默认会压在 border 下方）
• transform: translateX(50%) 把元素自身中心对齐到 right: 0 的位置，实现真正靠右
• 如果用 right: 0 不加 transform，legend 会右边缘贴边，文字“挤出” fieldset 右侧
• IE11 支持 transform，无需额外 hack；若需支持 IE9–10，可用 right: 0; margin-right: -50%; 配合 width: max-content

用 flex 实现居中或靠右（现代方案，但有兼容性限制）

把 <legend></legend> 当作 flex 子项来布局，需要先破坏 fieldset 的默认 legend 渲染机制——方法是给 <legend></legend> 设置 display: block，再包裹一层容器或直接对 fieldset 设 flex：

高级配置

...表单内容...

• 这样 legend 就变成普通块元素，align-items: flex-end 可使其靠右
• 但 fieldset 的 border 会包裹整个 flex 容器，legend 不再“跨在 border 上”，视觉上更像一个普通标题
• Chrome/Firefox/Edge ≥ 79 支持良好；Safari 15.4+ 开始支持 fieldset 的 flex 布局，旧 Safari（≤15.3）会退化为默认渲染
• 如果必须保持 legend 跨 border 的经典样式，别选这个方案

legend 对齐受 direction 和 writing-mode 影响

别忽略 RTL 场景：<fieldset dir="rtl"></fieldset> 下，即使没写任何 CSS，legend 默认也会靠右——这是规范行为，不是 bug。但如果你强制设了 dir="ltr" 却想靠右，就不能依赖 direction，得用上面的定位方案。

• writing-mode: vertical-rl 会让 legend 垂直显示，并沿垂直方向居中，此时 text-align 控制的是“行内”方向（即上下），不是左右
• 移动端 Safari 对 writing-mode + legend 组合支持不稳定，实测容易错位，慎用
• 所有方案里，position + transform 是唯一能绕过 direction / writing-mode 干预、精确控制水平位置的方式

text-align 或 margin 几乎总是无效的，得从定位模型入手。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！