如何解决 inline-block 与 text-align 的冲突问题

text-align: center 对 inline-block 元素失效，是因为该元素已脱离文档流的块级占据行为，仅宽于内容本身，导致“居中”失去参照基准；根本解法是理解其渲染机制，并改用现代布局方案（如 flexbox）精准控制对齐。

在 CSS 布局中，text-align 是一个行内上下文对齐属性，它只对块级容器内的行内级内容（如文字、inline 或 inline-block 子元素）起作用——但前提是这些子元素仍在该块容器的完整可用宽度内参与排列。

当你给 .logo 设置 display: inline-block 后，它不再默认撑满父容器（.contenedor）的宽度，而是收缩为内容宽度（例如 “PAGE TITLE” 文本的实际像素宽）。此时 text-align: center 仍生效，但它试图将这个窄窄的 inline-block “居中”在它自己那点宽度内——自然看不出效果。你可以通过添加 border: 1px solid red 到 .logo 并在浏览器开发者工具中观察其真实尺寸，直观验证这一点。

✅ 正确解法不是强行“修复” text-align，而是选用语义清晰、控制力更强的现代布局模型。推荐使用 Flexbox —— 它专为一维布局（行或列）设计，对齐逻辑明确且可预测：

.contenedor {
  display: flex;
  align-items: center;     /* 垂直居中（基于 header 高度） */
  justify-content: space-between; /* 左-中-右分布：logo 居中，nav 靠右 */
  padding: 0 20px;         /* 可选：增加左右内边距 */
}

.logo {
  font-family: "Oswald";
  line-height: 70px;
  /* 移除 text-align 和 inline-block —— flex 子项默认为 flex item */
}

.derecha {
  /* 移除 float: right —— flex 已接管布局 */
}

同时精简 HTML 结构（移除冗余包裹），提升语义性：

  
    PAGE TITLE
  
  

⚠️ 注意事项：

• 不要混合使用 float 与 Flexbox，float 会触发 BFC 并干扰 flex 行为；
• 若需兼容极老浏览器（IE9 及以下），才需回退至 inline-block + text-align 方案，此时应确保 .logo 的父容器是块级且宽度 100%，再配合 text-align: center，并将 .logo 设为 inline-block，同时用 margin: 0 auto 配合 text-align 辅助定位（但仍有局限）；
• line-height: 70px 在 Flex 中仍有效，用于垂直对齐文本；如需更健壮的垂直居中，建议改用 display: flex; align-items: center 在 .logo 内部进一步微调。

总结：text-align 失效不是 bug，而是 inline-block 渲染规则的必然结果。掌握这一原理，主动迁移到 Flexbox 或 Grid，不仅能彻底解决当前问题，更能建立可持续、可维护的布局思维体系。