• 締切
  • 困ってます

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

  • 質問No.4637271
  • 閲覧数1003
  • ありがとう数0
  • 回答数2

お礼率 33% (1/3)

セルごとリンクにしたくて、以下の記述をしました。
【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>を含むリンク文字の表示が二行揃ってくれず、ダメでした。

セル自体をリンクにして、さらにリンク文字を上下中央寄せにしたいのですが、やり方をご存知の方、教えてください。

回答 (全2件)

  • 回答No.2

ベストアンサー率 58% (114/196)

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

何か方法見つかることをお祈りし、私は断念します…スミマセン
  • 回答No.1

ベストアンサー率 58% (114/196)

a に色々入れすぎな感じがします
a.widelink{
display:block;
color: #000000;
text-decoration:none
}

a.widelink:hover{
color: #000000;
text-decoration:none
}

これだけで希望の表示にならないっすかね?
補足コメント
non_21c

お礼率 33% (1/3)

回答ありがとうございます。
>a に色々入れすぎな感じがします
…すみません、色々テストした残骸を残しています。

せっかくですが、教えていただいたやり方は試し終わっておりまして(すみません)…。
このやり方ですと、TD内のリンク文字の横一行全てリンクになりますが、リンク文字以外の部分がリンクにならないのです。
そのため、a内にheight:100%;としたのですが、そうするとリンク文字位置が上下中央ではなく、TD内TOPにきてしまうのです。

希望はTD内のどこをクリックしてもリンク先に飛べる&リンク文字は上下左右中央寄せです。

せっかく回答頂いたのに、生意気なことを書いて申し訳ありません m(-_-)m。
投稿日時:2009/01/17 15:20
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ページ先頭へ