编程新手求助：网页布局元素无法匹配UI设计对齐要求

针对你遇到的无法匹配UI设计稿对齐的问题，结合你提供的按钮代码，给你几个直接可行的调整方案：

1. 修复文字与SVG的垂直对齐 #

默认行内元素的基线对齐会导致文字和图标错位，给.secondary-cta类添加CSS：

.secondary-cta {
  display: inline-flex;
  align-items: center; /* 让文字和SVG垂直居中对齐 */
  gap: 8px; /* 调整文字和图标之间的间距，匹配UI稿 */
  text-decoration: none;
  color: #000; /* 根据UI稿设置文字颜色 */
}

2. 让按钮整体匹配页面布局 #

如果要让按钮在页面容器内对齐UI稿的位置，给它的父容器添加对应的布局样式：

• 水平居中：父容器加 display: flex; justify-content: center;
• 靠右对齐：父容器加 display: flex; justify-content: flex-end;
• 固定间距：给按钮加 margin: 16px 0;（数值根据UI稿调整）

3. 修正SVG的小问题 #

你的SVG标签末尾有多余空格，建议改成 <svg> 正确闭合：</svg>，避免潜在渲染异常。如果SVG尺寸和UI稿不符，直接调整width和height属性数值即可。

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