HTMLとCSSを教えてください。

質問

画像を中央揃えしたいのですが、
<img src="xxx.jpg">
img{
text-align:center;
}
とやったのですが、中央揃えできないのですがなぜでしょうか？

もうひとつ質問させてください。図書館の参考書に書かれている内容で、「今はtext-align:center;よりposition:absolute;top:105px;left:50px;を使う事が多くなっています」と書いてありました。ほかにもサイトのソースをみると、absoluteを使用しているサイトを良く見かけますが、positionを使ってデザインすると画面サイズとか、見るブラウザによってデザインが崩れてしまわないでしょうか？そうなるとやはりtext-align:center;を使うのがいいのではないでしょうか？

どれも初歩的ですみませんが、よろしくおねがいします。

回答No.2

leap_day · ベストアンサー

こんにちは

上の説明については＃1様が答えられているので省きます

position:absolute;
top:YYpx;
left:XXpx;

というのは(場合にもよりますが)画面の左上をtop:0px;left:0px;としてそこから下にYYpx、右にXXpxの位置から表示を開始します…という意味ですのでブラウザによって(お気に入りボックスやツールバーの高さなどで）その(0,0)ポイントが少し異なるだけで表示されている位置はほぼ同じです(画面を縮小してもその表示位置は変わりません。左上からの位置指定以外なら別ですが・・・）

text-align:center;についてはブラウザの横幅に対して中央配置をするいう意味ですので左右の隙間や文字数などがブラウザの幅に対して変わってくるだけです(そのブロック要素にwidth:**px;を設定してあればそれ以下にはならないので変わらないですが）

ですのでブラウザに対して常に(横に関して)中央に配置したいのであればtext-alignをブラウザの幅に関係なく表示位置を固定したいときにはposition:absolute;で位置を固定する(こちらでする場合には縮小したりしたときなどのことも考えながら配置しないとposition指定してないコンテンツと重なってレイアウトが崩れる可能性が有ります）という風にすればいいのではないでしょうか？

お礼

ご回答ありがとうございました。
詳しく書いていただけてうれしいです（＾＾）
ありがとうございました。

回答No.1

kazumero

text-alignの適用範囲はブロック要素とされています。
ですので、imgタグのようなインライン要素には適用できません。
中央揃えをする場合は、imgタグを何かブロック要素で囲み、そのブロック要素に対してtext-alignを適用します。

<p style="text-align:center;"><img src="xxx.jpg"></p>

position:absoluteは絶対位置指定ですので、画面の小さい端末だと、他のコンテナと重なり合う可能性があります。
個人的にはtext-align:center;が手軽でお勧めです。

お礼

ご回答ありがとうございました。
初歩的なことでもうしわけありませんでした。携帯用のページなどはtext-aignでやったほうがいいとの事ですね。ありがとうございました。