- ベストアンサー
セル内のリンク文字を中央に配置したい
- テーブルタグを使用してセル内のリンク文字を中央に配置する方法を教えてください。
- セル内の文字数が増えると、セルの高さが２倍になってしまい、セル内の文字も上下に離れてしまう問題についての解決策を教えてください。
- widthを600pxに設定し、tableを横４つ並べて隙間をあけたいが、border-spacingを使用してもうまくいかない場合の対処法を教えてください。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
[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行になる場合は調整が必要です。)
その他の回答 (1)
- think49
- ベストアンサー率59% (285/482)
vertical-align: middle; で縦方向の中央揃えになります。 ------ <style type="text/css"><!-- th { width: 130px; height: 70px; background-color: #efe; } th a { display: table-cell; vertical-align: middle; width: line-height: 100%; width: 130px; height: 70px; } th a:hover { background-color: #eef; } --></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/uuAltCSS.js/README.htm
お礼
詳しく教えてくださってありがとうございます やってみたのですが、２行だった文字が３行になって高さが３倍になってしまいました・・・ でも新しいことを知ることが出来て勉強になりました これから参考にさせていただきます
お礼
おぉ！！出来ましたっっ ありがとうございます ほとんど私が思っていたのと同じ形になりました １行ですむところはspanで囲まずにやってみたら文字が上にのぼってしまったので全部のa要素をspanで囲んでみました ホントにありがとうございました