「iSARA」というプログラミングスクールのサイトの模写をしていますが、左上の赤いボタンの中の「お問い合わせ / 資料請求はこちら」の文字を上下左右に中央寄せしたいです。

お世話になります。

現象
左上の赤いボタンの中の「お問い合わせ / 資料請求はこちら」の文字が上に偏ってしまっています。

期待値
左上の赤いボタンの中の「お問い合わせ / 資料請求はこちら」の文字を上下左右に中央寄せしたいです。

再現方法
index.htmlとstylesheet.cssを同じディレクトリに置き、index.htmlをFirefoxで開いていただければ再現できます。
当方の環境はUbuntu Mate 19.10です。

index.htmlとstylesheet.cssのソースコードは下記になります。
画像は著作権の問題で省略させていただきます。

模写しているサイトは下記になります。
iSARA[イサラ]バンコクのノマドエンジニア育成講座

何卒よろしくお願い致します。

index.html

html5
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="stylesheet.css">
7    <title>iSARA模写</title>
8</head>
9<body>
10    <header>
11        <div class="title-wrapper">
12            <img class="header-logo" src="/assets/isaralogo.png" alt="">
13            <p class="header-text">バンコクのノマドエンジニア講座</p>
14        </div>
15         <div class="header-button-wrapper">
16            <a href="">
17                お問い合わせ / 資料請求はこちら
18            </a>
19        </div>
20    </header>
21</body>
22</html>

stylesheet.css

css3
1@charset "UTF-8";
2
3/* 基本設定 */
4
5* {
6    margin: 0;
7}
8
9/* ヘッダー */
10
11header {
12    display: grid;
13    grid-template-columns: 
14        200px 1fr 1fr 200px;
15    grid-template-rows:
16        [header] 70px
17        [main visual] 500px;
18}
19
20.title-wrapper {
21    grid-column: 2 / -3;
22    grid-row: header;
23    display: flex;
24    flex-direction: row;
25    height: 40px;
26    margin: 20px;
27}
28
29.header-logo {
30    height: 40px;
31    width: 125px;
32    display: flex;
33    align-items: flex-end;
34}
35
36.header-text {
37    font-size: 15px;
38    font-weight: bold;
39    display: flex;
40    align-items: flex-end;
41}
42
43.header-button-wrapper {
44    display: block;
45    border-radius: 50px;
46    font-size: 15px;
47    background-color: #da6b64;
48    height: 40px;
49    width: 320px;
50    grid-column: 3 / -2;
51    grid-row: header;
52}
53
54.header-button-wrapper a {
55    display: flex;
56    justify-content: center;
57    align-items: center;
58    text-decoration: none;
59    color: white;
60}

行動規範の内容に同意します

回答1件

ベストアンサー

ボタンをコーディングする際に、<a>に背景色を文字色など見た目に関する記述をまとめたほうが、hover時の挙動を制御しやすいです。

CSS
1.header-button-wrapper a {
2    padding: 15px 40px;
3    display: inline-block;
4    border-radius: 50px;
5    font-size: 15px;
6    text-decoration: none;
7    background-color: #da6b64; /* 背景色 */
8    color: white; /* 文字色 */
9}