複数行リストの中央寄せについて

Question

リストにした文字を中央に寄せるにはどのようにすれば良いでしょうか。
1行に3列、中央に寄るようにしたいです（希望のイメージ画のような形）。

<現状>

<ul class="footer">
　<li><a href="url">Home</a></li>
　<li><a href="url">FOR</a></li>
　<li><a href="url">Company</a></li>
　<li><a href="url">Service</a></li>
　<li><a href="url">Founder</a></li>
　<li><a href="url">News</a></li>
　<li><a href="url">Contact</a></li>
</ul>

.footer {
    float: left;
    width: 50%;
    text-align: center;
}

＜現状＞

<希望>　✳︎イメージです。他サイトのスクリーンショットのためテキストは違います。

Comments

[m.ts10806]

PHP　はどこでしょう。「PHP」とされている提示コードはHTMLのみのようですが。

[yoshinavi]

5,6番目の「li」がインデントされていますが、「ul」が入るのでしょうか？

[kizunami]

すみません、htmlの間違いです。インデントも何故か入ってしまっていたようで、liが7つ続きます。

[m.ts10806]

ではひとまず「PHP」のタグは外しておいてください。

[takopo]

「PHP」のタグまだ付いてますよ。あと私は別に構いませんが、回答があった場合、高評価とは言わなくても何かしらコメントがあったほうが回答者は嬉しいと思いますよ。

[kizunami]

タグ外したと思っていたのですが、Wi-Fiが繋がりにくかったからか外れていなかったようです。失礼いたしました。再度外しましたが、ちゃんと外れているか後ほどまた確認してみます。

[m.ts10806]

私の方も確認しました。ありがとうございます。解決されたようで良かったです。

Answer 1

1行に3つずつとのことなので、疑似クラスを使って、3つおきに改行を入れるようにしてみたのですがどうでしょうか。

.footer {
  text-align: center;
}

.footer li {
  display: inline;
  margin-right: 1em; 
  margin-left: 1em;
}

.footer li:nth-child(3n+1) ::before {
  content: '\A';
  white-space: pre;
}

Comments

[kizunami]

ご回答ありがとうございました！今の私には擬似クラスというのが難しく、他の回答をベストアンサーとさせていただきました。今後も質問投稿すると思いますので、その際またお力いただけると嬉しいです。ありがとうございました。

[takopo]

疑似クラスは覚えるととても便利なのでぜひ頑張ってみてください。
https://prasm.blog/12396

また何かお役に立てることがあれば協力させていただきます！

Answer 2

こんな感じでしょうかね

.footer {
  list-style: none;
  text-align: center;
  width: 600px;
}

.footer > li {
  display: inline-block;
  padding: 0 2em;
}

Comments

[kizunami]

ありがとうございます！初心者の私にはこちらのやり方が調整しやすく解決いたしました。ありがとうございます！