不能将父级中的内联块元素居中

Question

所以我在使用middle类输入元素时遇到问题。因此容器box-block-head-yellow的宽度为100％，因此它可以跨越任何容器，类middle正在使用显示内联块，以便容器包裹它的内容，您可以看到下面的标记。

<!-- 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类可以解决中心对齐问题。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;