画像のtext-align:center;について

質問

http://loveosan0801.uijin.com/content/ishida.html
上記URLの画像がcenterに配置されません。
どのように修正すれば、centerに配置されますでしょうか？
お教えいただけませんか？

body
{
font-size:14px;
line-height:150%
}

h1
{
color:black;
border-left:10px solid #cccccc;
border-right:10px solid #cccccc;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
font-size:16px;
padding:10px 0 10px 0;
text-align:center;
}

p
{
text-align:left;
border-left:10px solid #cccccc;
border-right:10px solid #cccccc;
padding:0 0 0 20px;
}

#center p
{
text-align:center;
}

#menu
{
list-style-type:none;
text-align:center;
}

#menu li
{
display:inline;
border-right:5px solid #cccccc;
padding:0 20px 0 20px;
}

.main
{
width: 100%;
}

.main div
{
width: 50%;
margin: 0 auto;
}

回答No.2

tkmojo · ベストアンサー

今ソースを見ると、
<p class="center">画像</p>
と
p.center
{
text-align:center;
}
に変わってますね。

センター寄せ自体は有効ですが、
p に指定してある　padding: 0 0 0 20px; が効いているのでいるので、
少し中央より右側に寄っているというのが現状です。
p.center
{
text-align:center;
padding:0;
}
で直ると思います。

また、段落の使い方に関しては#1の方と同意見です。
改行は<br />を、段落が変わる場合に<p>を使いましょう。
また、句点などで区切られていない場合に<br />で改行するのはあまり好ましくありません。
（見ている人の環境((文字サイズやフォント))などによって、自動改行後すぐに改行したりする場合があります。）

お礼

ありがとうございました＾ω＾

回答No.1

ORUKA1951

basic.cssの24行目でtext-align:left;と指定されていますが？？？

HTMLに誤りがあります。
※Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
　でチェックして直しておきましょう．
　なお、段落を表すタグは<p></p>です。ひとつの段落は必ず<p></p>で括るようにしましょう。ひとつの段落内の行間を空けるために<p>を使うのは明らかに間違いです。もっとも根幹的な誤りです。ウィンドウ幅を縮めたり、フォントを拡大すると変なところで改行されてしまいます。日本語は、p{line-height:1.6em;margin:0 1em;text-indent:1em;}くらいが適当です。　行間はスタイルシートで空ければよいことです。

また、CSS2以降は、セレクタは基点となるセレクタにセレクタを続けて書くことになっています。
.mainではなく、div.mainと言う風に、class名をもつ、すべての要素の場合は*.mainです。
書かなければ、*.mainとみなされますが、多くのトラブルの元になります。というかHTMLがややこしくなる。

　たとえば示されたHTMLの場合、画像は文書上意味がないものですから、単純に
div p+h1:before{content:url(../img/017.gif)\A;white-space:pre;}
で、HTMLには書かないほうが良いでしょう。