【Chrome】align-itemsで文字が中央にならない時の対処法

HTML/CSS

HTMLとCSSでデザインするときに、ある要素の中で文字をど真ん中にしたいときによく使うのがdisplay:flex;とalign-items:center;とjustify-content:center;の3つを組み合わせる方法だ。

 

たいていの場合これでセンタリングはうまくいくのだけど、先日とあるホームページを作っているときにこれでは対処できない状況に陥った。

 

どんな状況だったかというと、Firefoxではうまく中央に表示されているのに、Chromeで見ると垂直方向のセンタリングができていない。

 

 

こんな感じになぜか文字が下にズレる。
Chromeのデベロッパーツールで問題の要素をチェックしてみても、align-itemsはちゃんと効いているみたいで、しばらく「？」状態になってしまった。

 

 

ちなみに、このときのHTMLとCSSはこんな感じ。

 

 

HTML

<div class="our_service_a_wrapper">
    <a href="//lodalhost" class="our_service_a">
        ホームページ制作
    </a>
</div>

 

CSS

.our_service_a_wrapper {
    width: 50%;
    margin: 10px;
}

.our_service_a {
    width: 100%;
    height: 100%;
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
    color: #43bcc5;
    border-radius: 0.7em;
    border: 3px solid #43bcc5;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

 

 

どう見ても何か問題があるようには思えない。
もう一度Chromeのデベロッパーツールに戻って、今度はCSSではなくHTMLをチェックしてみることにした。

 

 

すると・・・

 

 

ん？なんか謎の空白が入ってる！

 

お分かりだろうか？
「ホームページ制作」という文字の上にまるまる1行分、空白が入っている。

 

 

これが原因だ！

 

 

で、どうすれば直るのかというと、HTMLをこう直せばいい。

 

HTML

<div class="our_service_a_wrapper">
    <a href="//localhost" class="our_service_a">ホームページ制作</a>
</div>

 

 

さっきとの違いがわかりますかね？
aタグ内の改行とインデントを削除しただけです。

 

 

これでChromeでもちゃんと真ん中に表示されるようになりました。