- ベストアンサー
テーブルにリンクをはった場合のテキストの表示位置
http://okwave.jp/qa/q2259695.html ↑こちらを参考にて、テーブルにリンクをはることはできたのですが、テキストの表示位置を「 valign="middle"」と設定してもテーブルの中央に表示されず、上に表示されてしまいます。（「align="center"」はできます） テーブルの中央にテキストを表示させてい場合、どうしたら良いのか教えてください。 お願いします。
- mamammaa
- お礼率30% (3/10)
- ホームページ作成ソフト
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ブロック要素内でvalign属性(vertical-align)を効かせる方法はあるようですが、 IEやFirefoxなどで表示結果が異なりなかなか難しいようです。 テキストが一行のみならline-heightを使ってどうにか形にはなりますね(二行は不可)。 【CSS】 table{ border-style:ridge; width:200px; height:200px; } a{ line-height:200px; display:block; width:100%; height:100%; 【HTML】 <table> <tr> <td> <a href="#">テキスト</a> </td> </tr> </table> テキストを上下左右中央にするならaセレクタにtext-align:center; line-heightの値はテーブル(セル)の高さ分。
その他の回答 (3)
- torayoshi
- ベストアンサー率62% (910/1449)
valign属性がブロック要素には効かないからでは？ a要素の100%;height:100%;の指定がブロックレベルに相当してるからだと思うんです。 (ブロックレベル内にa要素があるからvalign="middle"が効かない) この指定をなくせばvalign="middle"は効きますが、そうなるとdisplay:block;もいらなくなりますね…
補足
大きめのテーブルの中央あたりにテキストを書き、テーブル全体にリンクをはる、なんてことはできない・・ということでしょうか？
- outbrave
- ベストアンサー率60% (231/380)
DOCTYPE宣言が必須という条件なら <td><a href="#" style="display: block;width: 100px;height: 70px;padding: 40px 0 0 0;text-align: center;">middle</a></td> サイズは微調整してください。 DOCTYPE宣言 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> または <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> DOCTYPE宣言がない場合は、わたしにはわかりません。
- outbrave
- ベストアンサー率60% (231/380)
そのソースを掲載できますか。 参考までに <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title></title> <style type="text/css"> <!-- td { border:solid 1px #000000; height:100px; width:100px; text-align:center; } --> </style> </head> <body> <table> <tr> <td style="vertical-align:top"><a href="javascript:void(0)">top</a></td> <td style="vertical-align:middle"><a href="javascript:void(0)">middle</a></td> <td style="vertical-align:bottom"><a href="javascript:void(0)">bottom</a></td> </tr> <tr> <td valign="top"><a href="javascript:void(0)">top</a></td> <td valign="middle"><a href="javascript:void(0)">middle</a></td> <td valign="bottom"><a href="javascript:void(0)">bottom</a></td> </tr> </table> </body> </html>
補足
<td width="幅" height"高さ" valign="middle"><a href="url" style="display:block;width:100%;height:100%; bgcolor:#ffffff;"></a></td> こうした場合、「valign="middle"」が有効にならないんです。。
お礼
ありがとうございました！ 思い通りのものができました！！ 皆様ありがとうございました。 いろいろな回答をいただき、とても勉強になりました。 自分がやりたかったことがなぜできないかということも理解できました。 親切丁寧な回答をいただき、感謝しています。