下記htmlにおいて、セル全体をリンクにしつつ、文字列を真ん中に配置したいのですが、どうもうまくいきません。ブラウザによっては、やはり表示も違います。


http://www.ryu-net.info/hatena1.htm

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2013/12/22 00:33:28
  • 終了:2013/12/23 20:58:59
id:ryuvay

もちろん、縦位置・横位置ともに真ん中です。

ベストアンサー

id:Lhankor_Mhy No.2

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312013/12/23 09:22:10

ポイント300pt

 うーん、ご希望には添えなさそうですが、一応回答します。
 IE10(quirks)、firefox、Chromeでセンタリングと縦中寄せとを確認しています。IE9以下とIE10(標準)で上手く表示されないことも確認済み。
 

tr.link_row a {
  display : table; /* 変更 */
  width : 100%;
  height : 100%;
  text-align : center;
}

/* 追加部分 */
tr.link_row td {
  height: 0px; /* 黒魔術 */
}

tr.link_row a span {
  display : table-cell;
  width : 100%;
  height : 100%;
  vertical-align : middle;
}

 

  </tr><tr class="link_row">
    <td><a href="link-a"><span>LINK A</span></a></td> <!--変更-->
    <td><a href="link-b"><span>LINK B</span></a></td> <!--変更-->
    <td><a href="link-c"><span>LINK C</span></a></td> <!--変更-->
  </tr>

 
 問題はIE標準のレンダリングだと「height:100%で親要素を参照してautoだった場合、テーブルレイアウトで計算された高さを取らずにCSSでの値を参照する」ことだと思います。たとえば、『黒魔術』の部分を80pxぐらいにしてみるとよく分かると思います。
 ですから、テーブルやセルの高さを拘束しない形でご希望のレイアウトをするには、IE標準のレンダリングにテーブルレイアウトで計算された高さを参照させることが必要だったのですが、ちょっとその方法が見つかりませんでした。CSS3の仕様書でもひっくり返せばもしかすると何か手が見つかるかもしれませんが、こうなるとJavascriptを使ってしまった方が早いと思います。
 
 
 サンプルを置いておきます(その内消します)。
https://www.dropbox.com/s/hliuj23dhar2zpk/hatena1.htm

id:ryuvay

どうしてもIEがネックになりますよね。黒魔術のくだりはちょっと笑ってしまいましたが、その意味合いも含め承知いたしました。jQuery使って高さを取得するか、デザイン自体を考え直して見ます。お世話になりました。

2013/12/23 20:58:41

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932013/12/22 13:22:42

どのへんがうまくいっていないのかイマイチわかりませんが、tdタグにalign属性・valign属性を付けるか、もしくはcssでtext-align・vertical-alignを付けてみてはどうでしょうか

<th align="center" valign="middle">

あとはtd直下にaタグを置くのではなく、divを間に挟んでcssでゴリゴリやるとか。
スタイルシート[CSS]/テーブル/セル内の文字の位置を指定する - TAG index Webサイト

id:ryuvay

>tdタグにalign属性・valign属性を付ける
http://www.ryu-net.info/hatena1_10.htm

>cssでtext-align・vertical-alignを付けてみて
http://www.ryu-net.info/hatena1_11.htm
横位置は問題ないとして、vertical-align -> middleを使うにはタグtdの高さを指定する必要があります。

さらにタグtdへheight:25px;を追加
http://www.ryu-net.info/hatena1_12.htm
セル全体にリンクを広げる為、タグaにheight : 100%;を指定してあります。
従って、100%で上書きされてしまい25pxは動作しません。

仮に100%を無くすと・・・
http://www.ryu-net.info/hatena1_13.htm
文字表示位置はこれで問題ありませんが、100%を消したので「セル全体をリンク」と言う目的は達成されません。

ではdivを挟んでみます。
http://www.ryu-net.info/hatena1_14.htm
そもそもタグaをdisplay : block;としてあり、得られる効果はdivと変わらないので意味がありません。
高さを指定したとしても前述と同じ意味で同じ結果になります。

2013/12/22 14:42:07
id:Lhankor_Mhy No.2

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312013/12/23 09:22:10ここでベストアンサー

ポイント300pt

 うーん、ご希望には添えなさそうですが、一応回答します。
 IE10(quirks)、firefox、Chromeでセンタリングと縦中寄せとを確認しています。IE9以下とIE10(標準)で上手く表示されないことも確認済み。
 

tr.link_row a {
  display : table; /* 変更 */
  width : 100%;
  height : 100%;
  text-align : center;
}

/* 追加部分 */
tr.link_row td {
  height: 0px; /* 黒魔術 */
}

tr.link_row a span {
  display : table-cell;
  width : 100%;
  height : 100%;
  vertical-align : middle;
}

 

  </tr><tr class="link_row">
    <td><a href="link-a"><span>LINK A</span></a></td> <!--変更-->
    <td><a href="link-b"><span>LINK B</span></a></td> <!--変更-->
    <td><a href="link-c"><span>LINK C</span></a></td> <!--変更-->
  </tr>

 
 問題はIE標準のレンダリングだと「height:100%で親要素を参照してautoだった場合、テーブルレイアウトで計算された高さを取らずにCSSでの値を参照する」ことだと思います。たとえば、『黒魔術』の部分を80pxぐらいにしてみるとよく分かると思います。
 ですから、テーブルやセルの高さを拘束しない形でご希望のレイアウトをするには、IE標準のレンダリングにテーブルレイアウトで計算された高さを参照させることが必要だったのですが、ちょっとその方法が見つかりませんでした。CSS3の仕様書でもひっくり返せばもしかすると何か手が見つかるかもしれませんが、こうなるとJavascriptを使ってしまった方が早いと思います。
 
 
 サンプルを置いておきます(その内消します)。
https://www.dropbox.com/s/hliuj23dhar2zpk/hatena1.htm

id:ryuvay

どうしてもIEがネックになりますよね。黒魔術のくだりはちょっと笑ってしまいましたが、その意味合いも含め承知いたしました。jQuery使って高さを取得するか、デザイン自体を考え直して見ます。お世話になりました。

2013/12/23 20:58:41
  • id:Lhankor_Mhy
    補足お願いします。
    ・対応させたいブラウザや環境の条件はどういうものですか。
    ・HTML構造は変えてしまってもよいのでしょうか。
  • id:ryuvay
    コメントありがとうございます。

    >対応させたいブラウザや環境の条件はどういうものですか。
    全部とまでは言いませんが、個人的なサイトとはいえ、環境は様々ですのでメジャーなブラウザ(IE・FireFox・Chromeなど)には対応させたいところです。

    >HTML構造は変えてしまってもよいのでしょうか。
    質問する都合上、インラインCSSを使っていますが、CSSファイルを使うつもりですし、jQueryなどを使うのもありだと考えています。また、私の先入観による考え方の違いによって解決方法が見出せないかったことも考えられるので、解決する方法があるのであれば、どんな形であれいただきたいです。従って変えてもかまわないです。
  • id:Lhankor_Mhy
    結局、heightがautoなのが難しいですね。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません