当您发现 `text-align: center` 对设置了 `display: inline-block` 的 `.logo` 不起作用时，这并非 css bug，而是由 css 视觉格式化模型（visual formatting model）决定的——`text-align` 只作用于**块级容器内联内容的对齐**，而 `inline-block` 元素本身已成为一个独立的、尺寸收缩的“行内盒子”，其父容器（此处是 `header`）默认为块级元素但未设置 `text-align`，且 `.logo` 自身宽度≈文字宽度，自然左贴边显示。

要真正解决问题并巩固布局原理，请按以下步骤理解与重构：

? 为什么 text-align 失效？

• text-align: center 应用于块级父容器，影响其内部所有内联级内容（如文字、inline 或 inline-block 子元素）的基线对齐位置；
• 但若父容器未显式设置 text-align，或子元素 inline-block 的宽度恰好等于内容宽（无多余空间），则“居中”在视觉上不可见；
• 您当前的 .logo 虽有 text-align: center，但它自身是 inline-block，该声明对其内部

  生效（确实居中了链接文字），但 .logo 整体仍在父容器 header 中左对齐——因为 header 是块级元素，默认 text-align: left，且未限制宽度或设置居中逻辑。

✅ 推荐解法：使用 Flexbox（语义清晰、行为可预测）

将 header 设为 Flex 容器，通过 justify-content 精确控制子项分布：

header {
    background: gray;
    display: flex;        /* 启用 Flex 布局 */
    justify-content: space-between; /* 左-中-右分布：logo 占中间，nav 靠右 */
    align-items: center;  /* 垂直居中（匹配 line-height: 70px 效果） */
    height: 70px;         /* 显式高度，确保垂直居中基准明确 */
}

.logo {
    font-family: "Oswald";
    /* 移除 text-align 和 inline-block —— Flex 下无需它们 */
}

.derecha {
    /* 移除 float: right —— Flex 中 float 无效且被忽略 */
}

对应 HTML 保持不变，但建议微调结构以提升语义性（可选）：

  PAGE TITLE
  

? 关键洞察：Flexbox 中，justify-content: space-between 会自动将第一个子元素（.logo）推至最左，最后一个（.contacto）推至最右，中间留白区域即为视觉“居中区”；若您希望标题严格水平居中（而非“剩余空间居中”），可改用 justify-content: center 并包裹 logo 与 nav 到一个 flex: 1 的中间容器中，或更简洁地——让 .logo 单独占据主轴中心：header { display: flex; justify-content: center; align-items: center; position: relative; height: 70px; } .logo { order: 1; } /* 确保 logo 在中间 */ .contacto { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

⚠️ 注意事项

• 避免混合旧式布局（float/inline-block）与新式布局（Flex/Grid）：float 在 Flex 容器中会被强制设为 float: none，产生意外交互；
• inline-block 仍适用于某些场景（如按钮组、内联图标），但顶部导航栏这类结构性布局，Flexbox 是现代标准答案；
• 若必须兼容 IE10+ 且不用 Flex，可用 text-align: center + display: table-cell 模拟，但复杂度高、语义差，不推荐。

掌握这一原理后，您不仅能修复当前问题，更能系统性区分「内容对齐」（text-align）与「元素定位」（flex, grid, position）的职责边界——这才是真正将知识转化为工程能力的关键。