• 締切済み

CSS セルごとリンクにする際、リンク文字を上下中央寄せにしたい

セルごとリンクにしたくて、以下の記述をしました。 【CSS】 ------------------------------------------------------------------ a.widelink{ vertical-align:middle; display:block; // display:inline-block; width: 100%; height:100%; // line-height:100%; color: #000000; text-decoration:none } a.widelink:hover{ vertical-align: middle; color: #000000; background-color: #9999FF; text-decoration:none } td.bgchng{ align: center; vertical-align: middle; color: #000000; margin: 0px; padding: 0px; } td.bgchng:hover{ vertical-align: middle; color: #000000; background-color: #9999FF; margin: 0px; padding: 0px; } ------------------------------------------------------------------ 【HTML】 ------------------------------------------------------------------ <TABLE border="1" bordercolor="#6666CC" cellspacing="0"> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test01.html" CLASS="widelink"> テスト<BR>(その1) </A> </TD> <TD width="450" bgcolor=""> &nbsp;テスト(その1)の説明文<BR> &nbsp;二行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test02.html" CLASS="widelink"> テスト(その2) </A> </TD> <TD width="450" bgcolor=""> &nbsp;テスト(その2)の説明文<BR> &nbsp;二行目<BR> &nbsp;三行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test03.html" CLASS="widelink"> テスト(その3) </A> </TD> <TD width="450" bgcolor=""> &nbsp;テスト(その3)の説明文<BR> &nbsp;二行目 </TD> </TR> </TABLE> ------------------------------------------------------------------ この記述だとリンク文字がセルのTOPに来てしまい、中央寄せになりません。 思いつく限りの場所にvertical-alignやvalignを仕込んでみましたがダメでした。 line-heightであわせる方法もやってみましたが、<BR>を含むリンク文字の表示が二行揃ってくれず、ダメでした。 セル自体をリンクにして、さらにリンク文字を上下中央寄せにしたいのですが、やり方をご存知の方、教えてください。

みんなの回答

  • koke29
  • ベストアンサー率58% (114/196)
回答No.2

あーなるほどー、やりたいことはわかりましたが方法が… aをpで囲んでpにaのスタイルを入れて~で出来た!と思ったら Firefoxしかokじゃなかったです笑 何か方法見つかることをお祈りし、私は断念します…スミマセン

  • koke29
  • ベストアンサー率58% (114/196)
回答No.1

a に色々入れすぎな感じがします a.widelink{ display:block; color: #000000; text-decoration:none } a.widelink:hover{ color: #000000; text-decoration:none } これだけで希望の表示にならないっすかね?

non_21c
質問者

補足

回答ありがとうございます。 >a に色々入れすぎな感じがします …すみません、色々テストした残骸を残しています。 せっかくですが、教えていただいたやり方は試し終わっておりまして(すみません)…。 このやり方ですと、TD内のリンク文字の横一行全てリンクになりますが、リンク文字以外の部分がリンクにならないのです。 そのため、a内にheight:100%;としたのですが、そうするとリンク文字位置が上下中央ではなく、TD内TOPにきてしまうのです。 希望はTD内のどこをクリックしてもリンク先に飛べる&リンク文字は上下左右中央寄せです。 せっかく回答頂いたのに、生意気なことを書いて申し訳ありません m(-_-)m。

関連するQ&A