如何在SVG的<foreignObject>元素内垂直居中<p>标签文本？

你遇到的核心问题是vertical-align属性在SVG的<foreignObject>元素上无法按预期工作——SVG的布局模型和普通HTML元素逻辑不同，且justify-content这类Flex属性需要先将容器设置为Flex布局才能生效。以下是无需依赖padding/margin的可靠实现方案：

关键调整说明 #

1. 修正<foreignobject>标签名为<foreignObject>（SVG标签名大小写敏感，小写会被视为未知元素）
2. 让<foreignObject>占满SVG整个空间，内部通过Flex布局实现文本垂直+水平居中
3. 无需依赖vertical-align，Flex布局更适配SVG的渲染逻辑

修改后的代码 #

CSS

.svg-button-grid__text {
  margin: 0;
  /* 用Flex布局实现自身在容器中居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 占满父容器高度 */
  height: 100%;
  text-align: center;
}

svg {
  /* 此处vertical-align仅控制SVG在外部HTML容器中的垂直位置，与内部文本无关 */
  vertical-align: middle;
}

foreignObject {
  /* 让foreignObject占满SVG视口 */
  width: 100%;
  height: 100%;
}

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 39" fill="none" class="svg-button-grid__svg" width="259.36" height="38.26">
  <path d="M13.3999 0.5H245.96C247.574 0.5 248.88 1.80616 248.88 3.42001V34.84C248.88 36.4539 247.574 37.76 245.96 37.76H13.3999C11.7861 37.76 10.48 36.4539 10.48 34.84V26.93H15.72C16.5561 26.93 17.24 26.2461 17.24 25.41C17.24 24.5738 16.5561 23.89 15.72 23.89H10.48V14.46H15.72C16.5561 14.46 17.24 13.7761 17.24 12.94C17.24 12.1038 16.5561 11.42 15.72 11.42H10.48V3.42001C10.48 1.80614 11.7861 0.5 13.3999 0.5Z" stroke="#FFEC83" />
  <!-- 修正标签名，用百分比占满SVG空间，嵌套XHTML命名空间容器兼容多浏览器 -->
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <p class="svg-button-grid__text">WATCH TRAILER</p>
    </div>
  </foreignObject>
</svg>

额外细节 #

• 内部嵌套<div xmlns="http://www.w3.org/1999/xhtml">是为了兼容部分浏览器对HTML内容的解析要求
• Flex布局的方式可以确保文本在SVG尺寸变化时依然保持居中，比固定值的padding/margin更灵活

内容的提问来源于stack exchange，提问作者jack