cssの中央寄せについて

cssの中央寄せについてお聞きしたいです。
次のhtmlについてcssで中央に寄せようとしているのですが中央に寄せられません

html
1<!doctype html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width,initial-scale=1.0">
7  <title>company</title>
8  <!-- ページレイアウト用CSS -->
9  <link rel="stylesheet" href="css/layout.css">
10  <link rel="preconnect" href="https://fonts.googleapis.com">
11  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
13  <!-- jQueryで操作する部分のCSS -->
14  <!-- jQueryで操作対象となる部分のCSS -->
15  <link rel="stylesheet" href="css/dynamic.css">
16  <!-- jQueryのダウンロード -->
17  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
18  <script src="scripts/custom.js"></script>
19</head>
20<body>
21  <div class="wrapper-header">
22    <div class="header">
23      <h1>Company</h1>
24    </div><!-- /.header --> 
25  </div><!-- /.wrapper-header -->
26  
27  <div class="wrapper-nav-global">
28    <ul class="nav-global clear">
29      <li><a href="#">ABOUT</a></li>
30      <li><a href="#">CONTACT</a></li>
31      <li><a href="#">PRESIDENT</a></li>
32    </ul>
33  </div><!-- /.wrapper-nav-global -->
34  
35  <div class="explain">
36    
37  </div>
38</body>
39</html>

cssを次のように作成しました。

css
1@charset "UTF-8";
2/* CSS Document */
3
4/* 基本設定クリア */
5html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, input, textarea, legend, article, aside, footer, header, hgroup, menu, nav, section {
6	border: 0;
7	color: #000;
8	font-size: 100%;
9	font: inherit;
10	margin: 0;
11	padding: 0;
12	vertical-align: baseline;
13}
14h1, h2, h3, h4, h5, h6 {
15	font-weight: bold;
16}
17a {
18	text-decoration: none;
19}
20ul {
21	list-style: none;
22}
23.clear {
24	overflow: hidden;
25	zoom: 1;
26}
27.header h1{
28  margin-bottom: 25px;
29  margin-left: 25px;
30  margin-top: 25px;
31  font-size: 30px;
32  font-family: 'Roboto', sans-serif;
33}
34.wrapper-nav-global {
35	background: #fff;
36	border-bottom: solid 2px #000;
37}
38.nav-global {
39	margin: 0 auto;
40	max-width: 960px;
41}
42.nav-global li {
43	float: left;
44	text-align: center;
45	width: 20%;
46}
47.nav-global li a {
48	border-right: solid 1px #ddd;
49	color: #000;
50	display: block;
51	padding: 15px 0;
52}

.nav-global {
margin: 0 auto;
max-width: 960px;
}
で上部のナビゲーションは中央に左右均等に寄せられるはずが
片方の偏ってしまいます。どうやらhtmlの<div class="wrapper-nav-global">か<ul class="nav-global clear">がもともとの長さをもっているせいでそう見えるようなのですが
こういった場合はどのようにすべきなのでしょうか？上部の
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">PRESIDENT</a></li>

を左右均等に見せたいです。

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

回答1件

ベストアンサー

CSS
1.nav-global li {
2    float: left;
3    text-align: center;
4    width: 20%;
5}

これが3つ左詰めということは、親の20%×3=60%の幅のものが、親の左に寄ることになり、右に40%余白ができることになります。
width: 33%;なら3つでほぼ親全体の幅となります。

投稿2021/10/01 14:00

itagagaki

総合スコア8402

Carlos_is_only

2021/10/01 15:20

なるほど、お答えいただき誠にありがとうございます！！！！！！！！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

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

cssの中央寄せについて

関連した質問