横並びさせたリストを中央寄せしたいです。

前提・実現したいこと

headerにあるリストを横並びにしましたが、中央寄せにできませんでした。
下記のように試してみましたが思ったように動きません、、、

HTML
1<div class="container">
2      <div class="top-title">
3        <a href="#"><h1>Write</h1></a><br>書くためのテーマ
4      </div>
5        
6      <nav>
7        <ul class="nav-header">
8          <li> <a class="home" href="＃">ホーム</a> </li>
9          <li> <a class="page" href="＃">ページ</a> </li>
10          <li> <a class="taipo" href="＃">タイポグラフィー</a> </li>
11          <li> <a class="info" href="＃">お問い合わせ</a> </li>   
12          <input class="form-text" type="search" placeholder="＃">  
13        </ul>
14      </nav>
15</div>

CSS
1.nav-header {
2  list-style: none;
3  justify-content: center;
4}
5.nav-header a{
6  text-decoration: none;
7}
8.nav-header li {
9  display: inline-block;
10  text-align: center;
11}
12header .container {
13  display: flex;
14  justify-content: space-between;
15  width: 1035px;
16}

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

回答4件

<nav>の中だけを中央寄せしたいということでしょうか？それでしたら ```CSS .nav-header { text-align: center; } ``` これで真ん中にいくと思います。

投稿2020/09/15 08:44

tr_09

総合スコア44

chapman

2020/09/15 10:45

試してみましたが動きませんでした。

tr_09

2020/09/15 12:38

キャッシュ削除してリロードしてもだめでしたか？？

kai0310

2020/09/16 11:56

キャッシュ云々ではないかと。

tr_09

2020/09/16 12:01

リロードだけじゃ反応しない時がたまにあったので… 違うのならすみません。的外れな回答でしたね。

chapman

2020/09/17 06:48

遅れてしまいすみません。一応補足するとcontainerクラスの中で３つに分けていて真ん中に配置したいのがリストです。 top-titleクラスを左端、リストを中央、inputを右端という感じです。中央に配置する指定以前にspace-betweenでtop-titleとリストを両端に置いたことに問題があれば、、、そこからやり直す必要がありますよね、、

tr_09

2020/09/17 07:30

でしたら、その３つをそれぞれ同じ名前の別のクラスで囲って、inline-blockを指定してみてはいかがでしょうか？

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

中央寄せにできませんでした。

これがどういった意味での中央寄せなのか少し曖昧ですが、
ただ要素を真ん中に持ってきたいのか、それぞれをナビゲーションメニューとして、画面に均等になるようにしたいのか。

もし後者なのであれば

HTML
1<div class="container">
2　　<div class="top-title">
3     　<a href="#"><h1>Write</h1></a><br>書くためのテーマ
4    </div>
5    <nav class="nav-justify">
6        <ul>
7           <li> <a class="home" href="＃">ホーム</a> </li>
8          <li> <a class="page" href="＃">ページ</a> </li>
9          <li> <a class="taipo" href="＃">タイポグラフィー</a> </li>
10          <li> <a class="info" href="＃">お問い合わせ</a> </li>   
11          <input class="form-text" type="search" placeholder="＃"> 
12        </ul>
13    </nav>
14</div>

CSS
1.container {
2    max-width: 960px;
3    margin: 0 auto;
4}
5
6.nav-justify ul {
7    list-style-type: none;
8    padding: 0;
9    margin: 0;
10    text-align: justify;
11}
12
13.nav-justify ul li {
14    display: inline-block;
15}
16
17.nav-justify ul:after {
18    content: "";
19    display: inline-block;
20    width: 100%;
21    height: 0;
22}
23

大枠の要素を幅指定することで、均等にする方法もあります。
ちなみにこちらの実行結果は以下のようになります。
画面幅を変えても、均等に間隔を保ってくれます。

投稿2020/09/16 09:45

tr_09

総合スコア44

こういう事かな？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<style type="text/css">
6		.nav-header {
7			list-style: none;
8			justify-content: center;
9			display: flex;       /* 追加 firefoxのデバックで見たら追加して下さいとの事 */
10			text-align: center;  /* 追加 他の方の指摘通りの追加 */
11		}
12		.nav-header a{
13			text-decoration: none;
14		}
15		.nav-header li {
16			display: inline-block;
17			text-align: center;
18			width: 20%; /* 追加 サイズは調整してね */
19		}
20		header .container {
21			display: flex;
22			justify-content: space-between;
23			width: 1035px;
24		} 
25	</style>
26</head>
27<body>
28	<div class="container">
29		<div class="top-title">
30			<a href="#"><h1>Write</h1></a><br>書くためのテーマ
31		</div>
32		<nav>
33			<ul class="nav-header">
34				<li> <a class="home" href="＃">ホーム</a> </li>
35				<li> <a class="page" href="＃">ページ</a> </li>
36				<li> <a class="taipo" href="＃">タイポグラフィー</a> </li>
37				<li> <a class="info" href="＃">お問い合わせ</a> </li>
38				<input class="form-text" type="search" placeholder="＃">
39			</ul>
40		</nav>
41	</div>  
42</body>
43</html>