文字列が中央ぞろえにならなかった

質問

自分のサイトの読み込み時間にローディングの画像を表記したのですが、Now Loadingの部分をpタグで囲ったらこの文字列が中央ぞろえにならなかったので、タグなしにしました。

タグなしの文字列は仕事ではNGと聞くのですが、その周りにdivがあれば問題ないのでしょうか？

<!--Loading Image-->
<div id="loading_img">
<img src="img/base/loading.gif" width="128" height="15" />
Now Loading
</div>

/*Loading Image*/
div#loading_img {
position: fixed;
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
z-index: 9999;
width: 128px;
margin: -7.5px 0px 0px -64px;
text-align: center;
color: #02CCFF;
}
/*Loading Image End*/

pタグで囲って中央ぞろえにする場合は、widthを使ってmargin：０　auto；でできるかと思ったのですが、これではだめなのでしょうか？
またテキストはwidthをいくつにするとピッタリかわからないのですが、どうやっていくつがピッタリかわかるのでしょうか？

回答No.2

m_matsubara · ベストアンサー

解決した様で良かったです。
おっしゃるとおりです。

お礼

ありがとうございます。

text-align: center;はブロック要素には使えないですが、
ブロック要素の中のインライン要素だけ、効いて文字列だけ中央ぞろえになる。

文字列はＰタグというブロック要素に囲まれているが、文字列自体がブロック要素になったわけではないので、インライン要素のままである文字列にだけ、text-align:center;が効いたということですね。

回答No.1

m_matsubara

必要な情報がすべて揃っていないので、想像になってしまうところがありますが

p{
text-align:center;
}

を使うと中央にできますが、それではない？

お礼

ありがとうございます。

確かに
/*Loading Image*/
div#loading_img {
position: fixed;
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
z-index: 9999;
width: 128px;
margin: -7.5px 0px 0px -64px;
}

div#loading_img p {
text-align: center;
color: #02CCFF;
}
/*Loading Image End*/

上記でｐタグ自身は親要素いっぱいになっていますが、
ｐタグの中の文字だけが中央ぞろえになりました。

text-align: center;はブロック要素には使えないですが、
ブロック要素の中のインライン要素だけ、効いて文字列だけ中央ぞろえになったということでしょうか？

文字列はＰタグというブロック要素に囲まれているが、文字列自体がブロック要素になったわけではないので、インライン要素のままである文字列にだけ、text-align:center;が効いたという認識でよいでしょうか？