写真にある赤いところの文字を真ん中に持っていきたい。

前提・実現したいこと

写真にある赤いところの文字を真ん中に持っていきたい。
また画面サイズを変更した時にレイアウトが崩れないようにしたい。

発生している問題・エラーメッセージ

中々真ん中に文字が上手くいかない。
上手く文字を真ん中に寄せても画面を小さくした時にレイアウトが崩れてしまう。

該当のソースコード

html
1<div class="information">
2        <dl>
3            <dt>
4                <span><i class="fas fa-info-circle"></i>大切なお知らせ</span>
5            </dt>
6            <dd>
7                <ul>
8                    <li>
9                        <div class="date">
10                            <p>2020年5月15日</p>
11                        </div>
12                        <div class="information-description">
13                            <p><a href="#">[5月30日(土)までにご予約の患者さん対象]電話診療による処方箋発行について</a></p>
14                        </div>
15                    </li>
16                    <li>
17                        <div class="date">
18                            <p>2020年5月1日</p>
19                        </div>
20                        <div class="information-description">
21                            <p><a href="#">新型コロナウイルス感染症に関する当院の状況について</a></p>
22                        </div>
23                    </li>
24                    <li>
25                        <div class="date">
26                            <p>2020年4月30日</p>
27                        </div>
28                        <div class="information-description">
29                            <p><a href="#">[診療情報]入院・外来診療について</a></p>
30                        </div>
31                    </li>
32                    <li>
33                        <div class="date">
34                            <p>2020年4月17日</p>
35                        </div>
36                        <div class="information-description">
37                            <p><a href="#">ご相談とお問い合わせについて(再掲)</a></p>
38                        </div>
39                    </li>
40                    <li>
41                        <div class="date">
42                            <p>2020年4月16日</p>
43                        </div>
44                        <div class="information-description">
45                            <p><a href="#">予約運用の変更について</a></p>
46                        </div>
47                    </li>
48                    <li>
49                        <div class="date">
50                            <p>2020年4月13日</p>
51                        </div>
52                        <div class="information-description">
53                            <p><a href="#">入館前の検温について</a></p>
54                        </div>
55                    </li>
56                    <li>
57                        <div class="date">
58                            <p>2020年4月13日</p>
59                        </div>
60                        <div class="information-description">
61                            <p><a href="#">新型コロナウイルス感染症対策に係るお願い</a></p>
62                        </div>
63                    </li>
64                    <li>
65                        <div class="date">
66                            <p>2020年3月18日</p>
67                        </div>
68                        <div class="information-description">
69                            <p><a href="#">面会の禁止について</a></p>
70                        </div>
71                    </li>
72                </ul>
73            </dd>
74        </dl>
75    </div>

sass
1.information{
2    background-color: $information-back;
3    max-width: 1024px;
4    margin: 0 auto;
5    
6    
7    dl{
8        display: flex;
9
10        & >dt{
11            align-items: center;
12            
13        }
14        dt{
15            font-size: 1.1rem;
16            margin-left: 5%;
17            
18            
19            span{
20                height: 100%;
21                display: block;
22                background-color: $information-important__back;
23                color: $information-important__color;
24            }
25        }
26
27        dd{
28            ul{
29                li{
30                    display: flex;
31                    padding: 10px 15px;
32                    line-height: 2.0;
33
34                    
35                    .date{
36                        margin-right: 10px;
37                    }
38                    .information-description{
39                        p{
40                            a{
41                                color: $information-important__link;
42                                &:hover{
43                                    text-decoration: none;
44                                }
45                            }
46                        }
47
48                    }
49                }
50            }
51        }
52    }
53}
54

試したこと

dlに align-items: center;を指定すると真ん中に文字は行くが背景色が亡くなっってしまう。
paddingを無理やり使うと画面を狭めた時したに余白ができてしまう。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2020/05/25 01:55

「赤いところの文字を真ん中に持っていきたい」とのことですが、垂直方向のことですか？

cafe1111

2020/05/25 02:28

すみません、質問に答えるのが遅くなってしまって。垂直だったのですがnew1roさんので上手くいきました。

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

回答3件

ベストアンサー

align-items: center;は、display: flex;とセットで使用しないと意味を成しません。
dtにalign-items: center;があるため、display: flex;と背景色を追加するのが楽そうです。
(その際、dt内のspanの記述のうちいくつかをコメントアウトしています。)

SCSS
1.information {
2    background-color: #eee;
3    max-width: 1024px;
4    margin: 0 auto;
5
6
7    dl {
8        display: flex;
9
10        & > dt {
11            align-items: center;
12            
13            // 追加
14            display: flex;
15            background-color: $information-important__back;
16        }
17
18        dt {
19            font-size: 1.1rem;
20            margin-left: 5%;
21
22
23            span {
24                // コメントアウト
25                // height: 100%;
26                display: block;
27                
28                // コメントアウト、dtに背景色をつける
29                // background-color: $information-important__back;
30                color: $information-important__color;
31            }
32        }
33        
34        // 後略

投稿2020/05/25 02:19

編集2020/05/25 02:22

new1ro

総合スコア4528

cafe1111

2020/05/25 02:28

ありがとうございました！上手くいきました！

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

詳細が不明のため、垂直方向中央配置、という推測で回答します。
gridレイアウトの方が楽そうな気がしないでもないですが……
サンプル

css
1    dl{
2        display: flex;
3
4        & >dt{
5            /* align-items: center; いらない */
6
7        }
8        dt{
9            font-size: 1.1rem;
10            margin-left: 5%;
11
12
13
14            span{
15                height: 100%;
16                display: flex; /* display: block; 変更 */
17                background-color: $information-important__back;
18                color: $information-important__color;
19                align-items: center; /* 追加 */
20            }
21        }
22