「iSARA」というプログラミングスクールのサイトの模写をしていますが、ヘッダーの赤いボタンをCSSのグリッド内に上下左右中央揃えにしたいです。

おはようございます。お世話になります。

現象
ヘッダーを4つに区切ったのですが、右から2番目のグリッドのヘッダーの赤いボタンが左上に偏っています。
ブラウザ:Google Chrome最新版
OS:Ubuntu Mate 19.10

期待値
右から二番目のグリッドのヘッダーの赤いボタンを上下左右中央揃えにしたいです。できたらCSS gridかFlexboxで解決したいです。

再現方法
下記のHTMLとCSSのコードを実行すると再現できます。

HTML
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>

css
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    height: 40px;
48    width: 320px;
49    grid-column: 3 / -2;
50    grid-row: header;
51}
52
53.header-button-wrapper a {
54    padding: 15px 40px;
55    display: inline-block;
56    border-radius: 50px;
57    font-size: 15px;
58    text-decoration: none;
59    background-color: #da6b64; /* 背景色 */
60    color: white; /* 文字色 */
61}

ご回答よろしくお願い致します。

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

回答2件

いまあるソースコードにできるだけ沿うなら以下です。

CSS
1.header-button-wrapper {
2    /* display: block; */
3    /* 追加 */
4    display: flex;
5    justify-content: flex-end; /* 横方向の末尾 (右) 配置 */
6
7
8    border-radius: 50px;
9    font-size: 15px;
10    height: 40px;
11    width: 320px;
12    grid-column: 3 / -2;
13    grid-row: header;
14}

投稿2020/05/13 23:03

編集2020/05/13 23:05

new1ro

総合スコア4528

退会済みユーザー

2020/05/14 06:06

自己解決できました。ありがとうございました！

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

ベストアンサー

CSS gridでheaderを12個に分け、

header-button-wrapperとaタグとの間にheader-button-text-wrapperを設定して、
header-button-wrapperにdisplay: flex;、justify-content: center;とalign-items: center;を設定したら、期待値を達成できました。

具体的なコードは下記になります。

html
1<header>
2        <div class="title">
3            <div>
4                <img class="header-logo" src="/assets/isaralogo.png" alt="">
5                <p class="header-text">バンコクのノマドエンジニア講座</p>
6            </div>
7        </div>
8        <div class="header-button-wrapper">
9            <div class="header-button-text-wrapper">
10                <a href="">
11                    お問い合わせ / 資料請求はこちら
12                </a>
13            </div>
14        </div>
15    </header>

css
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-top] 15px
17        [header-middle] 40px
18        [header-bottom] 15px;
19}
20
21.title {
22    grid-column: 2 / -3;
23    grid-row: header-middle; 
24    display: flex;
25    justify-content: center;
26    align-items: center;
27}
28
29.title-wrapper {
30    height: 40px;
31    margin: 20px;
32}
33
34.header-logo {
35    height: 40px;
36}
37
38.header-text {
39    font-size: 15px;
40    font-weight: bold;
41}
42
43.header-button-wrapper {
44    display: flex;
45    justify-content: center;
46    align-items: center;
47    grid-column: 3 / -2;
48    grid-row: header-middle;
49}
50
51.header-button-text-wrapper {
52    display: flex;
53    justify-content: center;
54    align-items: center;
55    border-radius: 50px;
56    font-size: 15px;
57    height: 40px;
58    width: 320px;
59}
60
61.header-button-text-wrapper a {
62    padding: 12.5px 45px;
63    border-radius: 50px;
64    font-size: 12px;
65    text-decoration: none;
66    background-color: #da6b64;
67    color: white;
68}