レスポンシブ対応のスマホ画面でh1タグの文字が中央揃えにならない

Question

ｈ1タグで付けた表示が、パソコン、タブレットでは正常に表示されるのですが、スマホ用画面でロゴと揃いません。

タブレット、PC時の表示
@media (min-width:668px) and (max-width:1024px)と
@media (min-width:1025px)

スマホ時の表示

このように、不自然にページタイトルの文字の上が開いてしまいます。
上下中央に揃えたいです。
サイトロゴの画像は45px*45pxです。

  <header>
	<div class="headerBar">
      <div class="sitelogo">
        <h1><img src="logo.png" alt="サイトロゴ"><a href="index.html">ページタイトル</a></h1>
      </div>
	<div class="menu">
	<span class="fas fa-bars" id="menubar"></span>
	</div>
	</div>
    </header>

//共通のcss
.sitelogo{
float:left;
width:90%;
}
.menu{
width:10%;
float:right;
font-size:34px;
line-height:45px;
}

h1 a{
  text-decoration: none;

}

.headerBar:after{
 content:"";
 display:block;
 clear:both;
}
.sitelogo{
float:left;
width:90%;
}
.menu{
width:10%;
float:right;
font-size:34px;
line-height:45px;
}

h1 a{
  text-decoration: none;

}
h1:hover{
opacity:0.8;
}
h1 a:visited{
color:#fff;
}
//スマホ用
@media (min-width:375px) and (max-width:667px){
body{
width:100%;
}

h1 a{
  font-size: 15px;
}
.sitelogo{
  height:45px;
}

どうすればいいかご教授お願いします。

Answer 1

vertical-align プロパティの初期値が baseline となっており、ベースラインに画像の下端が合わせられるため、このような動作になります。以下のように、vertical-align プロパティの値を変更することで、質問者さんの実現したいことを行なえると思います(動作確認用リンク)。

.sitelogo {
  float: left;
  width: 90%;
}
.menu {
  width: 10%;
  float: right;
  font-size: 34px;
  line-height: 45px;
}
h1 a {
  display: inline-block; /* 追記 */
  text-decoration: none;
}
.headerBar:after {
  content: "";
  display: block;
  clear: both;
}
.sitelogo {
  float: left;
  width: 90%;
}
.menu {
  width: 10%;
  float: right;
  font-size: 34px;
  line-height: 45px;
}
h1 a {
  text-decoration: none;
}
h1:hover {
  opacity: 0.8;
}
h1 a:visited {
  color: #fff;
}
@media (min-width: 375px) and (max-width: 667px) {
  body {
    width: 100%;
  }
  h1 a {
    font-size: 15px;
  }
  .sitelogo {
    height: 45px;
  }
}

h1 > img, h1 > a { /* 追記 */
  vertical-align: middle;
}

Comments

[skyneru]

こちらのプロパティの追加で解決しました。挙動がわからなかったのでとてもスッキリしました。短く書けるのでこちらの解答をベストアンサーにさせていただきました。回答ありがとうございます。

Answer 2

文字の縦位置はけっこう揃えるの難しいんですよね・・・。
下記でいかがでしょうか。

h1 a,
h1 img { vertical-align: middle;}
h1 a {
  line-height: 1.005em;
  display: inline-block;
}

Comments

[skyneru]

回答ありがとうございます。こちらのコードでも思った通りの表示になりました。