css - 親のインラインブロック要素を中央に配置できません

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;
}