セル内のリンク文字を中央に配置したい

解決済

質問者：ririka369
質問日時：2010/07/15 11:36
回答数：2件

セル内のリンク文字を中央に配置したい

テーブルタグにdisplay:blockを使ってセル全体がリンクできるようにしたのですが、セル内の文字数が増えると(８文字以上になると？)２行になる分、高さが２倍になってしまい、セル内の文字も上下に大きく離れてしまいます。
文字数が２行になる場合でもセルの中央にリンク文字を配置し、高さも２倍にならないようにするにはどうしたらいいか教えてください

全体のwidthを600px,
tableを横に４つ並べて一つ一つのtableの大きさを
width: 130px; height: 70px;
table同士の隙間をあけたかったのでborder-spacing: 20px;とってあります

th a{width: 130px; line-height: 70px; display:block;}
も入れてあります

cssもホームページ作りも慣れていないのでうまく説明できていないかもしれませんが、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： nekomikekamo
回答日時：2010/07/15 12:39

[html]

thのa要素ないの文字列をspanで囲む。
<th><a href="#"><span>●●●●●●●●●●●●<br />●●●●</span></a></th>

[css]
th a{
height: 70px;
display:block;
text-decoration:none;
}
th a span{
position:relative;
text-decoration:underline;
top:25%;/* leftやTOPでここでいろいろと小細工し調整 */
}

完璧な中央ぞろえとはいきませんが、ある程度は対応できるのではないでしょうか？
(height固定なので3行や4行になる場合は調整が必要です。)

- 0
- 件

通報する

この回答へのお礼

おぉ！！出来ましたっっ
ありがとうございます
ほとんど私が思っていたのと同じ形になりました

１行ですむところはspanで囲まずにやってみたら文字が上にのぼってしまったので全部のa要素をspanで囲んでみました
ホントにありがとうございました

通報する

お礼日時：2010/07/15 19:33

No.2

回答者： think49
回答日時：2010/07/15 16:32

vertical-align: middle; で縦方向の中央揃えになります。

------
<style type="text/css"></style>
</head>
<body>

<table summary="sample">
　<thead>
　　<tr>
　　　<th><a href="test">name1<br />foo</a></th>
　　</tr>
　</thead>
</table>
------

ただし、IE7以下は display: table-cell; に対応しません。
uuAltCSS.js を使えば対応できるかもしれませんが、未検証です。

uuAltCSS.js - README
http://uupaa-js-spinoff.googlecode.com/svn/trunk …