フッター部分を中央寄せしたい

前提・実現したいこと

フッター部分のテキスト(div)を中央寄せにしたいです

該当のソースコード

html
1<footer>
2			<div class="foot-wrapper">
3			<div class="foot-nav">
4				<ul>
5					<li> 成分一覧</li>
6					<li>ご利用規約</li>
7					<li>プライバシーポリシー</li>
8					<li>会社概要</li>
9				</ul>
10			</div>
11			</div>
12		</footer>

css
1footer {
2	width: 900px;
3	height: 80px;
4	background-color: gray;
5}
6	
7.footer-wrapper {
8	width: 900px;
9	margin: 0 auto;
10}
11
12
13li{
14	float: left;
15	padding:0px 20px; 
16	border-right: 1px solid #000;
17	list-style: none;
18}

試したこと

margin: 0 auto;で中央寄せになると思うのですがならないです。
なぜ効かないのか原因が思い浮かばないのでお分かりになる方いましたら教えていただきたいです。
よろしくお願いいたします。

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

回答4件

こういうのもあります。

CSS
1ul {
2  padding: 0;
3  text-align: center;
4}
5
6li {
7  display: inline-block;
8  padding:0px 20px; 
9  border-right: 1px solid #000;
10  list-style: none;
11}

投稿2019/07/24 03:33

yoshinavi

総合スコア3523

kana0701

2019/07/29 07:08

ありがとうございました！

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

中のリストを横並びにして更にボックス内の中央にしたいならこう

html
1<footer>
2  <div class="foot-wrapper">
3    <div class="foot-nav">
4      <ul>
5        <li> 成分一覧</li>
6        <li>ご利用規約</li>
7        <li>プライバシーポリシー</li>
8        <li>会社概要</li>
9      </ul>
10    </div>
11  </div>
12</footer>

css
1footer {
2  width: 900px;
3  height: 80px;
4  background-color: gray;
5}
6.foot-wrapper ul{
7  display: flex;
8  justify-content: center;
9}
10.foot-wrapper ul{
11  padding:0;
12}
13.foot-wrapper ul li {
14  padding: 0px 20px;
15  border-right: 1px solid #000;
16  list-style: none;
17}
18.foot-wrapper ul li:first-child {
19  border-left: 1px solid #000;
20}

footerを中央にしたいならこう

css
1footer {
2  width: 900px;
3  height: 80px;
4  background-color: gray;
5  margin:0 auto;
6}

リストの1個目にも線を追加するとかいう余計なお世話もしてるけど

投稿2019/07/23 07:42

dit.

総合スコア3235

kana0701

2019/07/29 07:08

ありがとうございました！

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

ベストアンサー

css
1footer {
2    width: 900px;
3    height: 80px;
4    background-color: gray;
5}
6
7.footer-wrapper {
8    width: 900px;
9    margin: 0 auto;
10}
11
12.foot-nav {
13    display:flex;
14    justify-content: center;
15}
16
17li {
18    padding:0px 20px;
19    border-right: 1px solid #000;
20    list-style: none;
21}

display:flex;で横並びににできます。
justify-content: center;で中央寄せにできます。
そのほかにも色々設定できるので下記のURLを参照してみてください。
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

投稿2019/07/23 07:18

youhey5488

総合スコア23

dit.

2019/07/23 07:29

display:flex;等を指定するのは.foot-navではなくulまたは.foot-nav ulかと思います。

youhey5488

2019/07/23 08:34

あ、間違いないですね。失礼いたしました。。。

kana0701

2019/07/29 07:08

ありがとうございました！

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

中央寄せの結果イメージがわからないのですが

css
1<style>
2footer {
3    width: 900px;
4    background-color: gray;
5display:flex;
6}
7
8.foot-wrapper {
9  margin:auto;
10  background-color: yellow;
11}
12</style>
13<footer>
14<div class="foot-wrapper">
15<div class="foot-nav">
16<ul>
17<li> 成分一覧</li>
18<li>ご利用規約</li>
19<li>プライバシーポリシー</li>
20<li>会社概要</li>
21</ul>
22</div>
23</div>
24</footer>