这部分的 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% 的列。
最佳答案
我想我明白了,你可以做的是在标题上添加一个 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 ,如果对您有帮助,请告诉我!
关于html - 如果它与另一个元素 (span) 共享 div,如何将 h1 的文本水平居中放置在屏幕中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53229747/