CSS:テキストを左揃えのまま中央寄せにする方法を教えてください。

現在、動画を視聴しながらHTML・CSSの勉強をしています。

実現したいこと

上記の画像のようにお知らせ項目を左揃えのまま中央寄せにする方法がわかりません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <link rel="stylesheet" href="style.css">
9  <title>企業サイト</title>
10</head>
11
12<body>
13  <header>
14    <!-- ここから ヘッダー -->
15    <div class="w_inner">
16      <div id="top">
17        <div class="tagline">企業のホームページ制作</div>
18      </div>
19      <nav id="main_menu" class="w_inner">
20        <ul>
21          <li><a href="/">トップ</a></li>
22          <li><a href="./service">サービス</a></li>
23          <li><a href="./price">料金案内</a></li>
24          <li><a href="./news">ニュース</a></li>
25          <li><a href="./company">会社概要</a></li>
26          <li><a href="./contact">お問い合わせ</a></li>
27        </ul>
28      </nav>
29    </div>
30    <div class="header_img">
31      <img src="./img/header_img.jpg" alt="">
32    </div>
33  </header>
34  <!-- / ここまでヘッダー -->
35  <div id="wrap">
36    <div id="content" class="page_front w_inner">
37      <section class="front_service">
38        <div class="sec_head">サービス</div>
39        <div class="lead">ここにテキストが入ります。ここにテキストが入ります。<br>ここにテキストが入ります。ここにテキストが入ります。</div>
40        <ul class="s_box">
41          <li>
42            <div class="ttl">ホームページ制作</div>
43            <div class="descri">ここにテキストが入ります。ここにテキストが入ります。<br>ここにテキストが入ります。ここにテキストが入ります。</div>
44          </li>
45          <li>
46            <div class="ttl">ランディングページ</div>
47            <div class="descri">ここにテキストが入ります。ここにテキストが入ります。<br>ここにテキストが入ります。ここにテキストが入ります。</div>
48          </li>
49          <li>
50            <div class="ttl">SEOコンサルティング</div>
51            <div class="descri">ここにテキストが入ります。ここにテキストが入ります。<br>ここにテキストが入ります。ここにテキストが入ります。</div>
52          </li>
53        </ul>
54      </section>
55      <section class="front_news">
56        <div class="sec_head">お知らせ</div>
57        <div class="news_list">
58          <ul>
59            <li>
60              <a href="">
61                <div class="date">2022.12.28</div>
62                <div class="ttl">セミナー開催のお知らせ</div>
63              </a>
64            </li>
65            <li>
66              <a href="">
67                <div class="date">2022.12.10</div>
68                <div class="ttl">冬季休業のお知らせ</div>
69              </a>
70            </li>
71            <li>
72              <a href="">
73                <div class="date">2022.11.28</div>
74                <div class="ttl">移転のお知らせ</div>
75              </a>
76            </li>
77            <li>
78              <a href="">
79                <div class="date">2022.11.22</div>
80                <div class="ttl">創立記念日のため臨時休業のお知らせ</div>
81              </a>
82            </li>
83            <li>
84              <a href="">
85                <div class="date">2022.11.15</div>
86                <div class="ttl">ホームページリニューアルのお知らせ</div>
87              </a>
88            </li>
89            <div class="btn_stn"><a href="">一覧をみる</a></div>
90          </ul>
91        </div>
92      </section>
93    </div>
94  </div>
95
96  <footer>
97    <div class="w_inner">
98      <nav>
99        <ul>
100          <li><a href="/">トップ</a></li>
101          <li><a href="./service">サービス</a></li>
102          <li><a href="./price">料金案内</a></li>
103          <li><a href="./news">ニュース</a></li>
104          <li><a href="./company">会社概要</a></li>
105          <li><a href="./contact">お問い合わせ</a></li>
106        </ul>
107      </nav>
108      <div id="copyright">&copy;2022 XXX.Inc All right Reserved</div>
109    </div>
110  </footer>
111
112</body>
113
114</html>

CSS
1@charset "UTF-8";
2
3#top div {
4  margin: 50px 50px 0px;
5}
6
7.header_img {
8  margin-right: calc(50% - 50vw);
9  margin-left: calc(50% - 50vw);
10}
11
12.header_img img {
13  width: 100%;
14  height: 500px;
15  object-fit: cover;
16}
17
18#main_menu.w_inner ul {
19  display: flex;
20  justify-content: right;
21  margin-right: 50px;
22}
23
24#main_menu.w_inner li {
25  list-style-type: none;
26  margin-left: 20px;
27}
28
29.sec_head {
30  display: flex;
31  justify-content: center;
32  align-items: center;
33}
34
35.lead {
36  text-align: center;
37}
38
39.s_box {
40  display: flex;
41  justify-content: space-evenly;
42  text-align: center;
43  margin-right: 40px;
44}
45
46.s_box li {
47  list-style: none;
48  text-align: center;
49  border: 1px solid black;
50  margin: 20px;
51}
52
53.descri {
54  font-size: 80%;
55}
56
57.news_list div {
58  text-align: center;
59}
60
61.news_list ul {
62  list-style-type: none;
63  width: fit-content;
64  border: 1px solid black;
65}
66
67.news_list li a {
68  display: flex;
69  gap: 25px;
70  text-decoration: none;
71}

結果

日付とテキストは横並びになったのですが全体的に中央寄せができない状況です。
どなたか教えていただけますでしょうか。

int32_t

2022/06/15 00:09

HTMLとCSSの全文を画像ではなくテキストで質問文に入れてください。

int32_t

2022/06/15 00:29

全文を開示してください。「お知らせ」のスタイルやその親の情報も必要です。

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

回答1件

ベストアンサー

現在のソースを元にして以下で当方の環境ではできました。

パターン１

css
1.news_list {
2  display: flex;
3  justify-content: center;
4}

もしくは以下のソースを加える形でもいけます。

パターン2

css
1.news_list ul {
2  margin: auto;
3}

２は昔よく使われていた手法です。
参考になれば嬉しいです。

投稿2022/06/15 01:57

編集2022/06/15 02:00

euicnvhf202105

総合スコア132

muffinmen

2022/06/15 02:44

ありごうございます！できました！本当に助かりました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する