No.45097 テーブル内の画像と文字がうまく一緒に表示されません
画像と文字表示の不具合について、質問させていただきます。
ソース表示画面から全て書き込んで編集しているのですが、テーブルのセル内に
画像と文字を入れるとき、画像と文字の両方を中央に持ってきて
文字を画像の下に表示するようにしたいのです。
何度かやってみましたが、画像の下に文字が表示されるのはいいものの、
なぜか文字だけが左のほうに偏り、うまく表示されませんでした。
テーブルタグを使っていないときはうまくいきますし、使っていても
プレビュー画面では正常に表示されているために、不思議で仕方がありません。
以下にそのときのソースです。
<table border="1" cellspacing="2" bgcolor="#000000">
<tbody>
<tr>
<td bgcolor="#ffffff" valign="bottom" align="center"><img border="0" alt="×××.gif" align="middle" width="100" height="100" src="http://file.×××.gg-blog.com/Img/1281991494/" /><br />
×××</td>
</tr>
</tbody>
</table>
テンプレートは共有の「dcdcdc+」を使用しています。
ソース表示画面から全て書き込んで編集しているのですが、テーブルのセル内に
画像と文字を入れるとき、画像と文字の両方を中央に持ってきて
文字を画像の下に表示するようにしたいのです。
何度かやってみましたが、画像の下に文字が表示されるのはいいものの、
なぜか文字だけが左のほうに偏り、うまく表示されませんでした。
テーブルタグを使っていないときはうまくいきますし、使っていても
プレビュー画面では正常に表示されているために、不思議で仕方がありません。
以下にそのときのソースです。
<table border="1" cellspacing="2" bgcolor="#000000">
<tbody>
<tr>
<td bgcolor="#ffffff" valign="bottom" align="center"><img border="0" alt="×××.gif" align="middle" width="100" height="100" src="http://file.×××.gg-blog.com/Img/1281991494/" /><br />
×××</td>
</tr>
</tbody>
</table>
テンプレートは共有の「dcdcdc+」を使用しています。
投稿者：No Name Ninja 投稿時間：2010-08-17 08:11:41
投稿者 : No Name Ninja
投稿時間：2010-08-17 11:53:45
テーブルの<td>内の文字が左寄せになる、ということですね？
では、スタイルシート内に、<td>に対する指定がないか確認してみましょう。すると、
/*<td>の全ての設定*/
td {
border: 1px solid #dcdcdc;
text-align:left;
}
という指定が確認できます。
「text-align:left;」というのが、テキストの左寄せ指定です。
このスタイルシートを適用するファイル内の<td>内テキストは、全て左寄せになってしまいます。
多分、head内スタイルシートの方を変えると、テンプレート内の<td>が使われている部分のデザインが変わってしまうので、要素（td）に直接指定を加えましょう。
今現在：<td bgcolor="#ffffff" valign="bottom" align="center">
修正例：<td style="background-color: #ffffff; vertical-align: bottom; text-align: center;">
※alignだけでなく他の指定もスタイルシートでまとめました。不都合がある場合は適宜変えて下さい。
────────────────────────
尚、td要素に「align="center"」では何故効かないのか？というと、優先順位があるからです。
「HTMLの要素で指定したもの」よりも「CSS（外部・head内・インライン）」が優先されます。
優先順位（高い＞低い）
インラインでの指定＞head内で指定＞外部CSSでの指定＞HTML要素での指定
では、スタイルシート内に、<td>に対する指定がないか確認してみましょう。すると、
/*<td>の全ての設定*/
td {
border: 1px solid #dcdcdc;
text-align:left;
}
という指定が確認できます。
「text-align:left;」というのが、テキストの左寄せ指定です。
このスタイルシートを適用するファイル内の<td>内テキストは、全て左寄せになってしまいます。
多分、head内スタイルシートの方を変えると、テンプレート内の<td>が使われている部分のデザインが変わってしまうので、要素（td）に直接指定を加えましょう。
今現在：<td bgcolor="#ffffff" valign="bottom" align="center">
修正例：<td style="background-color: #ffffff; vertical-align: bottom; text-align: center;">
※alignだけでなく他の指定もスタイルシートでまとめました。不都合がある場合は適宜変えて下さい。
────────────────────────
尚、td要素に「align="center"」では何故効かないのか？というと、優先順位があるからです。
「HTMLの要素で指定したもの」よりも「CSS（外部・head内・インライン）」が優先されます。
優先順位（高い＞低い）
インラインでの指定＞head内で指定＞外部CSSでの指定＞HTML要素での指定
普段CSSはほとんどいじらないので、盲点でした。
おかげさまで思ったように表示させることができました。
適切かつ詳しい解決法、ありがとう御座いました。