【他の方法も募集中】float:left;を中央寄せしたい

Question

【実現したいこと】float:letf;をつけたliを中央に並べたいです。

追記【現状】flexboxで自己解決　→【他にも皆様が使われている方法があれば教えて頂きたいです】

下記はHTML,自己解決方法を記述しております。　

				<nav class="menu">
					<ul>
						<li><i class="fa fa-caret-left fa-fw"></i>アイウエオ</li>
						<li><i class="fa fa-caret-left fa-fw"></i>アイウエオ</li>
						<li><i class="fa fa-caret-right fa-fw"></i>アイウエオ</li>
						<li><i class="fa fa-caret-right fa-fw"></i>アイウエオ</li>
					</ul>
				</nav>
		
	

自己解決方法

.menu {
		display:flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

目を通して頂きありがとうございました！

Comments

[yoshinavi]

提示のコードは、「liのfloat設定」は必須なのでしょうか？float外してulにflexがシンプルではないでしょうか？

[hellohello]

yoshinavi 様　必須ではございません。私の知識が浅く、リストを横並びにするにはfloat:left;をかけなければという固定概念がありました。おっしゃる通りそちらの方がシンプルですね。ありがとうございます。

[akihiro3]

横から失礼します。ただ単にliを横並びにするだけの場合はliにdisplay:inline-blockでも可能ですよ。目的に合ったやり方、好みのやり方など色々やってみてください。ちなみに、liにfloatは並びが逆になるので個人的には好みではないです。そして応用性があるのでflexboxが好みです

[hellohello]

akihiro3様　flexboxはやはり便利なのですね。まだまだ少し理解するためにFroggyという学習ゲームをしただけなので勉強を開始したいと思います。HTML&CSSから開始し現在Bootstrapを学んでいるのですがflexboxも早くやりたくなってきました！！体系的に学んでいかなければですね。有難いアドバイスありがとうございます！

[yoshinavi]

「!important」は、普段は使用せず、コードが適用されない原因究明が出来ない場合に「最後の手段」で使用されることをオススメします。理由として「!important」には「!important」でしか取り消せないですし、使い過ぎると「カオス」状態に陥りやすくなるためです。

[hellohello]

yoshinavi　様　お礼を申し上げるのが遅くなり申し訳ありません。　なるほど…本当の禁忌の最終手段として考えていた方がよろしいですね…。今回何をやっても解決できず、やけくそで使ってしまいました。m( _ _ )m 以後気をつけます！ありがとうございます。

Answer 1

下記追加で解決します

  .menu ul {
    display: flex;
  }
  
  @media screen and (max-width:780px) {
    div.box2 {
      margin:0 auto;
    }
    
    .menu ul {
      flex-direction: column;
    }
  }

幅とかtext-alignは必要があるならお願いします
必要な場所は残して、不要な場所は消してくださいね

Comments

[hellohello]

akihiro3 様
いつもありがとうございます！！！こういった方法もあるのですね。
申し訳ありません。質問欄がごちゃごちゃ読みにくいですよね…少し整理致しました。

追記　この方法を今試しました！上記参考サイトより分かり易く便利です。ありがとうございます！

[akihiro3]

分かりやすい（楽な）方法は見つかると嬉しいですよね！
頑張ってください

あと、おそらく試行錯誤したのだろうとは思うのですが、
何故その要素に、何故そのプロパティで、何故その値にしたのか。
どのような目的と考えでその行動をしたのか。。。

hellohelloさん本人以外解りえない状況があるので、
そこを明記してもらえると答えられる事があるかもしれません。

[hellohello]

akihiro3様
温かいお言葉ありがとうございます。はい、とても嬉しいです。さらに自分で見つけられた時は格別ですね。今回は質問した後に自己解決出来まして、せっかく質問したので他の方法もないか、という風に質問を変えました。（そのため申し訳ないのですがベストアンサーは後でつけさせて頂きますお許しください…）皆様方が時間をかけて学んでこられた知識をこうやって簡単に人に聞いてしまうのは少しよろしくないので、自分でしっかり調べ試してから、それでも出来ない時の最後の砦にしたいと思います。何分独学で周りに聞ける人がいないもので、画面の前で狂気狂乱喜んでおります。いつも本当にありがとうございます！頑張ります！

すでに解決策を教えて頂いたのに恐縮でございます…。確かにその方が伝わりやすいですね。/**/で記入致します！ご指摘頂きありがとうございます。

[hellohello]

akihiro3 様　今書き直していたところ、自分のミスに気がついたため、消させて頂き引き続き募集のところだけに致しました。nav.menu で書くべきところをそもそもdiv.menuでCSSを書いていたため、何をどうしても反映されていなかったようです。失礼致しました。