你遇到的这个问题太常见了——默认的.center对齐是基于视图的框架边界，而非内容本身。Text的框架会包含字体自带的上下留白（比如字体的升部、降部空间），而SF Symbol图片的框架刚好贴合内容边缘，所以它们的框架中心对齐后，内容看起来就不在一条水平线上了。

要实现内容中心线对齐，我们可以自定义垂直对齐规则，让视图基于自身的内容中心来对齐，而不是框架边界。下面是两种可行方案：

方案1：自定义垂直对齐指南（推荐） #

首先定义一个自定义的垂直对齐标识，再分别给Text和Image设置对齐规则，让它们的内容中心对齐到同一基准线：

import SwiftUI

extension VerticalAlignment {
    // 定义自定义对齐标识，默认回退到系统中心对齐
    private enum ContentCenterAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[VerticalAlignment.center]
        }
    }
    static let contentCenter = VerticalAlignment(ContentCenterAlignment.self)
}

struct ContentView: View {
    var body: some View {
        HStack(alignment: .contentCenter) {
            Text("Cloudy")
                .background(Color.yellow)
                // 取文本首尾基线的平均值作为内容中心，避开字体上下留白
                .alignmentGuide(.contentCenter) { dimensions in
                    (dimensions[.firstTextBaseline] + dimensions[.lastTextBaseline]) / 2
                }
            
            Image(systemName: "cloud.heavyrain")
                .background(Color.blue)
                // 图片框架本身贴合内容，直接用框架中心作为内容中心
                .alignmentGuide(.contentCenter) { dimensions in
                    dimensions[.center]
                }
        }
        .font(.largeTitle)
        .border(Color.red)
    }
}

这个方案的优势是自适应字体、图片大小的变化，不用手动调整参数，是最优雅的解决方式。

方案2：快速手动偏移（适合简单场景） #

如果只是临时调整，也可以给Text添加微小偏移，手动对齐到图片中心：

var body: some View {
    HStack(alignment: .center) {
        Text("Cloudy")
            .background(Color.yellow)
            .offset(y: 3) // 根据字体大小微调偏移量
        Image(systemName: "cloud.heavyrain")
            .background(Color.blue)
    }
    .font(.largeTitle)
    .border(Color.red)
}

不过这个方法不够灵活，偏移量会随字体、图片样式变化而改变，只适合快速测试或简单场景。

运行自定义对齐的代码后，你就能看到文本的内容中心和图片的中心完美对齐了，不再受框架边界的影响。

内容的提问来源于stack exchange，提问作者Vince O'Sullivan