padding-top to h1 в вертикальном выравнивании div

Question

У меня есть div, который имеет определенную высоту, а содержимое внутри настраивается в соответствии с высотой ВЕРТИКАЛЬНО теперь, что я сделал, я добавил свойство display-table; родительскому div и display: table-cell;vertical-align: middle; ребенку div теперь, что происходит, мой div вертикально выровнен и выглядит неплохо, но h1 внутри дочернего я не точно так же центрирован, как кнопка, я решил, что добавление верхнего слоя или верхнего края поля может решить проблему, но оно не принимает ни одно из них здесь. код

HTML

<div class="all-smiles" id="parent"> 
    <div id="child"> 
    <div class="container" align="center"> 
     <div class="row"> 
       <h1>All Smiles Welcome</h1> 
       <button>BOOK AN APPOINTMENT</button> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

#parent { 
    display: table; 
    width: 100%; 
    height: 250px; 
} 
.all-smiles { 
    background-color: #b7181c; 
} 
.all-smiles h1 { 
    color: white; 
    display: inline; 
    margin-right: 3%; 
} 
.all-smiles button { 
    padding: 12px; 
    background: 0; 
    color: white; 
    border: 1px solid #fff; 
    text-decoration: none; 
    font-family: young; 
} 

#child { 
    display: table-cell; 
    vertical-align: middle; 
} 

FIDDLE

Answer 1

Вы должны указать эти два:

• Vertical Alignment, как middle
• высота линии и 1

Код:

.all-smiles h1 { 
    color: white; 
    display: inline; 
    margin-right: 3%; 
    vertical-align: middle; 
    line-height: 1; 
} 

Просмотр

Fiddle: https://jsfiddle.net/wd3sr2xv/