Нельзя центрировать элемент встроенного блока в родительском

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 { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.middle { 
 
    display: inline-block; 
 
}