text-align: center在Safari中失效问题求助（附相关代码）

嘿，我来帮你搞定这个Safari里text-align:center不生效的问题！先看了你的代码，发现几个关键问题，咱们一步步来修复：

问题分析 #

你的CSS里只写了带浏览器前缀的text-align: -webkit-center和text-align: -moz-center，却没添加标准的text-align: center——这可是现代浏览器（包括新版Safari）识别的核心属性！另外，还要确保<a>和<img>的display属性符合要求，这样text-align才能对它们生效。

基于现有代码的修复方案 #

先给你最贴合原有写法的修正版本：

#selection {
  text-align: center; /* 先写标准属性，让现代浏览器优先识别 */
  text-align: -webkit-center; /* 兼容旧版Safari */
  text-align: -moz-center; /* 兼容旧版Firefox */
  word-spacing: 4vw;
  margin: 0;
}

#selection a {
  display: inline-block; /* 让a标签成为可对齐的行内块元素，避免布局异常 */
}

#selection img {
  width: 30vw; /* 补充你需要的宽度值，比如30vw或固定像素，确保图片不会撑满容器 */
  height: auto; /* 保持图片比例不变 */
}

更推荐的Flexbox替代方案 #

如果你的项目不需要兼容特别老旧的浏览器，我强烈推荐用Flexbox布局——它在Safari里的兼容性非常好，代码也更简洁直观：

#selection {
  display: flex;
  justify-content: center; /* 直接实现子元素水平居中 */
  gap: 4vw; /* 用gap替代word-spacing，更精准控制图片间距 */
  margin: 0;
  flex-wrap: wrap; /* 小屏幕下图片自动换行，适配移动端 */
}

#selection img {
  width: 30vw; /* 替换成你实际需要的宽度 */
  height: auto;
}

Flexbox的优势在于不用依赖text-align的特性，直接通过容器的flex属性控制子元素对齐，布局更稳定，也不容易出现浏览器兼容问题。

内容的提问来源于stack exchange，提问作者S. Drescher