无法在父级中居中内联块元素

Question

所以我在输入带有middle 类的元素时遇到了问题。所以容器 box-block-head-yellow 的宽度为 100%，因此它可以跨越任何容器，middle 类使用 display inline-block 以便容器环绕它的内容，您可以在下面看到标记。

<!-- Markup for container -->
<div class="box">
 <div class="box-block-head-yellow">
  <div class="box-title-block middle">
   <h1 class="box-title">Latest projects</h1>
  </div>
 </div>
</div>

所以我遇到的问题是中间容器不在中间居中。在每个元素上使用以下样式。

父元素

子元素

元素没有水平输入的结果

Answer 1

将以下 CSS 添加到您的 box-block-head-yellow 类可以解决中心对齐问题。

.box-block-head-yellow {
  width: 100%;
  text-align: center;
}
.middle {
  display: inline-block;
}