当您发现 `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 保持不变，但建议微调结构以提升语义性（可选）：
? 关键洞察：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）的职责边界——这才是真正将知识转化为工程能力的关键。
