cssでのvertical-alignが適用されない

Question

##やりたいこと
ヘッダーの「サイト きじ しつもん」というところの縦を中央に揃えたいです。

##ソースコード
こちらをクリック
JSFiddleに飛びます

##やったこと
heightで縦幅を変えたところ、inline-blockでvertical-alignをしているのにもかかわらず、縦中央に寄らない状態です。

Answer 1

pとulにmarginがついてるせいでheaderの高さを越えちゃっています。

p, ul{
  margin:0;
}

を追加で少し良くなります。が、vertical-align:middleは揃え位置を中央にしているだけで、親要素の中央に配置するわけではありませんので、たとえば「サイト」の部分の高さが変わるとずれるかと思います。

flexを活用すると楽にレイアウトできます。

header{
  //下記を追加
  display:flex;
  align-items:center;
}

//下記をまるっと削除
header nav,
header p{
  display: inline-block;
  vertical-align: middle;
}

Comments

[leaf.]

display:flex; なんて便利なものがあるとは思いませんでした！ありがとうございました！

Answer 2

header {
    background: #464c56;
    width: 100%;
    /*height: 70px;*//* これを削除すればよいです。 */
    position: fixed;
}

Answer 3

たての中央、の意味があっているのかわからないのですが、

header{
  background: #464c56;
  width: 100%;
  height: 70px;
  text-align: center;  //←これを追加
}

これはどうでしょうか？？