Q&A
HTMLと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">©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}
結果
日付とテキストは横並びになったのですが全体的に中央寄せができない状況です。
どなたか教えていただけますでしょうか。
全文を開示してください。
「お知らせ」のスタイルやその親の情報も必要です。
回答1件
0
ベストアンサー
現在のソースを元にして以下で当方の環境ではできました。
パターン１
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
総合スコア126
あなたの回答
tips
プレビュー
