ヘッダーを基準にして要素の中心を合わせるにはどうすればよいですか？

Question

<header> 
    <h1><a href="/">Blog</a></h1> 
</header> 

h1は、vertical-alignと垂直にセンタリングすることはできません。マージンを適用すると、ページに相対的であり、headerには適用されません。

Answer 1

使用この：インライン要素または表セルのための

h1:before { 
    content: ""; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 

Answer 2

vertical-align作品。 h1はデフォルトでブロックです。あなたができることは、ヘッダーの行の高さを高さと同じにすることです。ここでは一例である

header { 
 
    background-color: red; 
 
    height: 150px; 
 
    line-height: 150px; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
}

<header> 
 
    <h1><a href="/">Blog</a></h1> 
 
</header>

Answer 3

あなたはまた、このためにフレックス使用することができます：ここでは一例です。

header{ 
 
display:flex; 
 
width:100%; 
 
height:150px; 
 
background-color:#0077dd; 
 
color:#fff; 
 
    align-items: center; 
 
}

<header> 
 
<div class="element">This is element</div> 
 
</header>

あなたが水平方向の例が必要な場合にのみ、縦一例です。