yahooAPIサンプルの商品説明を左寄せにするには・・・？

質問

以前、
http://oshiete1.goo.ne.jp/qa5529510.html　の質問をした者です。
PHPのカテゴリではない気がしますがお許しください…！

Yahoo!デベロッパーネットワークにある
http://developer.yahoo.co.jp/sample/shopping/sample1.html
のサンプルをいじりながら、検索した情報をDBに登録したり等しています。

そこで、↑のページを全て中央揃え（キーワード入力や検索ボタン、検索結果等）したのですが
商品の名前や画像はそのまま左寄せなのに、何故か商品説明だけが一緒に中央揃えされてしまい困っています。
商品説明の出力の部分やスタイルシートのファイルをいじってみたのですが一向に変わらず…。
スタイルシートの方も初心者な為、見逃してる部分があるかと思います。

初歩的な所で申し訳ないですが、どなたか助けて下さると嬉しいです。

回答No.1

hogehoge78

センター揃えはどのようにしました？
default.css内の、
「html, body」に「text-align:center;」を足したんでしょうか。
もしそういう前提で宜しければ、
prototype.css内の
「div.item」に、「margin:auto;」と「text-align:left」を足してやってください。
これで要件は満たされるはずです。

text-align:center;の部分は、body以下のテキスト（またはインライン要素）はすべて真ん中揃えにする、という役割です。
それに対して、divタグ、h1,h2タグなどは「ブロック要素」というもので、CSSでwidthを指定しない限り、これらは横幅１００％（画面はじまである）要素になり、且つwidthなどで横幅を指定してもbodyタグにtext-align:center;を指定してもdivタグ自体は真ん中に揃わないで中に書いてあるテキストのみ真ん中に揃います。
（IEだとその指定方法でdivタグごと真ん中に揃っちゃいますが、それはIEのバグ（仕様）です。chormeやFirefoxで確認してみると揃ってないのが分かります。）

なので、bodyタグのtext-align:center;をdiv.item内でtext-align:left;と打ち消してやることで、div class="item" の中のテキストを左揃えにし、div.item内で、width指定されたブロック要素を真ん中に寄せるための「margin:auto;」を指定してやるのが正解です。

CSSは結構面倒で、ブラウザによって見た目が相当変わる場合があるので、有名ブラウザは全てインストールしておいて、デザインのチェックを行う必要があります。