html - 如果h1的文本与另一个元素共享div，如何在屏幕中间水平居中显示h1的文本

我的这部分的html代码如下所示：

<div class="container navbar id="navbar">
     <div class="row banner">

        <span class="one-tenth column logo">
           <i class="fab fa-3x fa-cuttlefish"><a href="index.html"></a></i>
        </span>

        <h1 class="nine-tenths column"><strong>Title</strong></h1>

     </div>
</div>

到目前为止，我在CSS中尝试过此操作：

.banner{
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:25px 0;
  text-align:center;
}

我正在使用自己定义的网格系统：

.one-tenth {
  width: calc(100% /10 * 1);
}

.nine-tenths {
  width: calc(100% / 10 * 9);
}

除网格系统所需的所有其他规则外。

我的问题是，我的h1仍然无法显示在屏幕/横幅的中间（横幅宽度为100％，因此其中心也将位于屏幕的中间）。

它显示在其列的中间，而不是屏幕的中间。

请记住，h1与另一列宽度为10％的列共享其容器横幅。 H1本身是90％宽度的列。

最佳答案

我想我明白了，您可以做的是在标题上增加一个与。十分之一宽度相同大小的边距，为此，您需要将标题包装在span标签中

<div class="container navbar id="navbar">
     <div class="row banner">

        <span class="one-tenth column logo">
           <i class="fab fa-3x fa-cuttlefish"><a href="index.html"></a></i>
        </span>

        <h1 class="nine-tenths column"><strong><span class="span">Title</span></strong></h1>

     </div>
</div>

然后您需要将此类添加到CSS

.banner .span{
  margin-right: calc(100% /10 * 1);
}

您可以检查它here，如果有帮助，请告诉我！

关于html - 如果h1的文本与另一个元素共享div，如何在屏幕中间水平居中显示h1的文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53229747/