Html 基于外部导航对中h1

我在导航中有一个h1，它当前以h1的宽度为中心。如何使用文本对齐，使标题基于导航宽度居中

以下是我的HTML和CSS：

* { 保证金：0； 填充：0； 字体系列：Big Caslon、Book Antiqua、Palatino Linotype、Georgia、serif； } H1A{ 文字装饰：无； 颜色：继承； } .标志{ 身高：100%； } 导航{ 宽度：100%； 高度：90px； 背景色：黑色； 显示器：flex； } 导航h1{ 文本对齐：居中； 利润率：15px0； 颜色：白色； 字体大小：44px； 线高：55px； 弹性：10自动； }

---

您可以将导航设置为相对位置，这意味着任何内部绝对元素都将在该元素的边界内。然后将h1设置为绝对位置，这将从页面的正常流中删除该元素，并使其与相对位置的父元素一起流动。从那里，您可以使用边距将其居中：15px auto；，左：0和右：0这将使h1元素100%宽度的导航，从而正确居中

* { 字体系列：Big Caslon、Book Antiqua、Palatino Linotype、Georgia、serif； 保证金：0； 填充：0； } H1A{ 颜色：继承； 文字装饰：无； } .标志{ 身高：100%； } 导航{ 背景色：黑色； 显示器：flex； 高度：90px； 位置：相对位置； 宽度：100%； } 导航h1{ 颜色：白色； 弹性：10自动； 字体大小：44px； 左：0； 线高：55px； 利润率：15px自动； 位置：绝对位置； 右：0； 文本对齐：居中； }

---

Flexbox是一个完美的方法，而你几乎做到了

我用class.ghost添加了一个空div，作为徽标的平衡。因为我知道徽标的宽度为90px，所以我将ghost div设置为相同，并且ghost div和徽标都具有类似的flex设置：

.logo {
  height: auto;
  width: 90px;
  flex: 0 0 90px; // same
}
.ghost {
  width: 90px;
  flex: 0 0 90px; // same
}

现在，随着允许增长的flex:10汽车，它将占据所有剩余的空间自然和保持完美的中心感谢幽灵div侧翼的右侧

* { 保证金：0； 填充：0； 字体系列：Big Caslon、Book Antiqua、Palatino Linotype、Georgia、serif； } H1A{ 文字装饰：无； 颜色：继承； } .标志{ 高度：自动； 宽度：90px； flex:090px； } 导航{ 宽度：100%； 高度：90px； 背景色：黑色； 显示器：flex； } 导航h1{ 文本对齐：居中； 利润率：15px0； 颜色：白色； 字体大小：44px； 线高：55px； 弹性：10自动； } .鬼魂{ 宽度：90px； flex:090px； }

---

由于左/右：0和绝对位置，该元件不居中，与整个导航一样宽。文本仅居中，因为文本对齐：居中；这是一个有点黑客作为我将如何点击的标志，如果它是一个链接？标题在顶部…这是我的观点，你现在使所有东西都定位，而不是依赖于自然的布局流程。刚刚发布了我的flexbox解决方案。。。