WordPress模板中调整better-health-info类在header居中显示

嘿，我来帮你搞定这个居中问题！要把.better-health-info元素在头部居中，最稳妥的方式是通过自定义CSS来调整（别直接改主题核心文件，不然主题更新后你的修改就没啦），具体步骤和代码如下：

第一步：打开WordPress自定义CSS面板 #

登录你的WordPress后台，依次点击：外观 → 自定义 → 额外CSS（有些主题可能叫“自定义CSS”或“主题选项”里的CSS面板）。

第二步：添加居中样式 #

根据.better-health-info元素的类型，选择对应的CSS代码：

情况1：元素是块级元素（比如div） #

如果这个元素是块级，直接给它设置左右自动边距，同时指定合适的宽度（避免占满整个头部）：

/* 精准定位目标元素，提升样式优先级 */
#header .better-health-info {
  /* 水平居中核心代码 */
  margin-left: auto;
  margin-right: auto;
  /* 可选：设置最大宽度，适配不同屏幕 */
  max-width: 1140px;
  /* 让元素在小屏幕上自适应宽度 */
  width: 100%;
  padding: 0 15px; /* 可选：加左右内边距，避免贴边 */
}

情况2：元素是行内/行内块元素（比如span、img） #

如果是行内类元素，需要给它的父容器设置文本居中：

/* 找到.better-health-info的直接父容器，替换成实际的选择器 */
#header .parent-container-of-better-health-info {
  text-align: center;
  width: 100%; /* 确保父容器占满头部宽度 */
}

情况3：父容器用Flex布局（现代布局方式） #

如果你的头部容器已经用了Flex，直接给父容器加居中属性即可：

#header {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 可选：同时垂直居中 */
  flex-direction: column; /* 如果元素是垂直排列的话 */
  width: 100%;
}

小提示：如果样式不生效怎么办？ #

• 检查选择器的优先级：可以用更具体的选择器，比如#header .main-navigation .better-health-info，或者临时加!important（尽量少用，优先级太高会给后续修改添麻烦）
• 清空浏览器缓存：有时候浏览器会缓存旧的CSS文件，按Ctrl+F5强制刷新页面就能看到新样式

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