html - 如果它与另一个元素 (span) 共享 div，如何将 h1 的文本水平居中放置在屏幕中间

Question

这部分的 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% 的列。

Answer 1

我想我明白了，你可以做的是在标题上添加一个 margin-right，其大小与 .one-tenth 宽度相同，为此你需要将标题包装在 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 ，如果对您有帮助，请告诉我!