中央寄せの適切な方法

Question

以下のリストの適切な中央寄せのやり方を教えていただけたら幸いです。
うまくできないのですがliにfloatが当てられて高さが0になっているのが原因なのでしょうか？

  <footer>
    <div class="container">
      <ul class= "footer-list">
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
        <li>リスト4</li>
      </ul>
    </div>
  </footer>

以下関係しそうなCSSだけ抜粋して載せておきます。よろしくお願いいたします。

body {
  margin: 0;
  -webkit-print-color-adjust: exact;
}

*{
  font-family: Meiryo;
}

/*ヘッダーにもulタグあり*/
ul{
  margin:0px;
}

/*ヘッダーにもliタグあり*/
li{
  list-style:none;
  float:left;　
  font-weight: bold;
  padding-top:50px;
  padding-left:20px;
  color:#ffffff;
}


/*footerの他にいくつかcontainerクラスあり*/
.container{
  width: 100%;
  margin: 0 auto;
}

footer{
  height: 150px;
  width: 100%;
  background-color: #FE9A2E;
  
}

Comments

[kszk311]

liの中身が、2行以上になる可能性があるため、liの最大高さに合わせて中央よせをしたいということでよろしいでしょうか。

[kszk311]

あぁなんか勝手に上下中央だと勘違いしてました。普通に横に中央よせということですね。

[on_off_on]

言葉たらずでした、すみません。

[yoshinavi]

CSS「class= "footer-list"」も提示してください。

[on_off_on]

すみません、footer-listにはCSSは当てていない状態です。

[yoshinavi]

＜li＞がfloatされているので、質問者さんもお考えのとおり、親の高さが0で打ち消されているので、このままでは動かす事はできません。「kszk311」さんの回答のとおりfloatを解除するか、解除しない場合は親に高さや幅を持たせて、親の中央寄せが必要となります。

[on_off_on]

ありがとうございます。

Answer 1

以下のようにしてみてはどうでしょう？

.container{
  width: 100%;
  margin: 0 auto;
  以下を追加
  display: flex;
  justify-content: center;
}

Comments

[on_off_on]

すみません、お伝えし忘れていましたがconatinerクラスは他のdivにもつけられています。
その場合はそもそもfooter-listに回答いただいたCSSを当てる方が良いのでしょうか？

[root_jp]

それではフッター専用で以下のようにしてみてはどうでしょう。
footer div.container {
display: flex;
justify-content: center;
}

Answer 2

liのfloatを解除して、下記でいけるかと

.footer-list {
    text-align: center;
}
.footer-list li {
	display: inline-block;
	float: none;
}

また、.containerの最後が閉じられていませんが、sassでしょうか？
sassじゃなければ閉じておいてください。