画像の中央寄せ

Question

画像を中央寄せしたいのですが、

CSSで

float:center;
も
text-align:center;
も効きません。
どうしたら中央寄せできますでしょうか？

<li id="sumple">
    <img src="test.jpg">
    <p class="text">
    <br>texttexttexttexttexttexttexttexttexttexttexttexttexttext
    <br>texttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
    texttexttexttexttexttexttext<br></p>
</li>

#sumple img{
		float:center;
		text-align: center;
		margin: 30px;
		display: block;
	}
	
#sumple p{
		margin: 30 auto;
		display: block;
	}

よろしくお願いします。

Answer 1

まずfloatの値はleftかrightかnoneしかありません。centerは無効な値です。
それから#sumple imgをdisplay:block;にしていますが、なぜblockにしているのですか？
display:blockの要素はtext-alignでのセンター寄せが効かなくなります。

あと中央寄せに直接関係はありませんが、#sumple pのdisplay:block;は指定する意味がありません。
なぜならp要素のdisplay値の初期値はblockだからです。

全般的にCSSの初歩中の初歩の理解が出来ていないようです。
ここでいちいち質門するより、初心者向けのCSS入門書を1冊購入して、
じっくり熟読する方が早いと思いますよ。

Answer 2

aKusanoさんが仰っていますが、HTMLの要素やCSSのプロパティごとの仕様はかなり大事なポイントです。
リファレンスなどに一通り目を通して仕様を把握しておくと大変役に立つので、ぜひ一度確認してみてください。
ちなみに質問にあるコード内のHTMLの要素やCSSのプロパティは次のリンク先で確認できます。

p 要素 - HTML | MDN
float - CSS | MDN
display - CSS | MDN
text-align - CSS | MDN

このリンク先にあるMDN(Mozilla Developer Network)以外にもこのようなリファレンスは割と沢山あるので、分からないことがあれば「HTML 要素名」や「CSS プロパティ名」などのキーワードで検索すると理解の助けになるページが数多く見つかります。

そして質問内容である画像の中央寄せですが、ブロック要素の左右の中央寄せであればmarginプロパティのrightとleftの値をautoにするというのがポピュラーな方法です。

<div id="sample">
    <img src="test.jpg">
    <p class="text">
    <br>texttexttexttexttexttexttexttexttexttexttexttexttexttext
    <br>texttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
    texttexttexttexttexttexttext<br></p>
</div>

#sample {
  /* 内容の位置が分かりやすいように背景色を指定 */
  background-color: #ddd;
}

#sample img {
  display: block;
  margin: 0 auto;
}

#sample .text {
  margin: 30px 0;
  text-align: center;
}

あとは質問内容とは別になりますが、要素にクラスを与えているのであればCSSでのセレクタは#sumple pよりも#sumple .textとした方がパフォーマンス上は無駄がありません。

Answer 3

レスポンシブは細かく対応しなきゃですが、強引にいくなら、Position-relativeにしてleftもしくはright:◯◯%とかPXとかで指定すれば視覚的に真ん中へ持ってくることは可能ですよ！