横に揃えた上で中央揃えにしたいです。。

Question

サイトの幅が変わっても、中央に配置です。
ですが、
なかなか思い通りにいきません。。。

floatとpositionを併用しない方がいいのでしょうか？
他のやり方があればお願いします。

参考サイト
https://qiita.com/colorrabbit/items/178ea1ab16f727142421

<ul class="cakeall clearfix">
	<li class="cake1">
	<img src="img/cake3.png" width="250" height="250" alt=""/>
	<p>1.甘さと酸味のバランスが絶妙ないちご</p>
	</li><!--cake1-->
	
	<li class="cake2">
	<img src="img/cake2.png" width="250" height="250" alt=""/>
	<p>2.あっさりと仕上げた生クリーム</p>
	</li><!--cake2-->
	
	<li class="cake3">
	<img src="img/cake1.png" width="250" height="250" alt=""/>
	<p>3.しっかりとしたスポンジ</p>
	</li><!--cake3-->
	</ul><!--cakeall-->

.cakeall{
		float:left;
	text-align: center;
	}
	

Answer 1

過去の質問に回答したものがあるので

HTMLでのセンタリング

Comments

[退会済みユーザー]

やってみたのですが、３つ縦に中央配置になってしまいます。
3つを横に並べた上で、中央配置にしたいです。
すみませんが、もう少し詳しくお願いします。

[退会済みユーザー]

どんな風に表したいのかを文で伝えるのは難しいですよね。絵でも書いてくださいな。
というか、タイトルは「中央揃えにしたい」ですよね...

[退会済みユーザー]

今後は、イメージを絵で書いて伝えようと思います。同じ過ちを繰り返さないよう、以後気をつけます。不快な思いをさせてしまいすみませんでした。

Answer 2

いろいろ方法が載っています。

【よこ並びのCSS。】
http://lopan.jp/layout/

Comments

[退会済みユーザー]

ありがとうございます。