- 締切済み
セルをリンクにしたときの揃え位置
http://www.htmq.com/style/vertical-align.shtml こちらを参考にセルのリンクを作成しました。 セル中の文字の縦揃えを中央揃えにしようと<td style="vertical-align:middle">としたのですが、反映されず困っております。 リンクの定義部分でA{vertical-align:middle}とも試しましたが変化ありませんでした。 どのようにすれば可能になりますでしょうか？
- yamaimoZ
- お礼率38% (31/81)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- steel_gray
- ベストアンサー率66% (1052/1578)
#2です。具体的なHTML(&CSS)了解しました。 そこで紹介されている方法で縦方向の中央揃えをするなら、 a{ display:block; width:100%; padding-top:～;/*上余白*/ padding-bottom:～;/*下余白*/ /*height:100%; ←heightは指定しない*/ } また、行・セルに高さが指定されているなら、指定を削除してください。 行の高さ+上下のpaddingがセルの高さとなります。 縦方向のセンタリングが素直に使えればいいんですが色々問題があるので上記のような方法をいつも使っています。
- steel_gray
- ベストアンサー率66% (1052/1578)
「セルのリンク」ってのがよくわからない、 具体的にどんなhtml（&css）なのか補足してください。
- notnot
- ベストアンサー率47% (4846/10257)
合ってると思います。 vertical-align:top; や :bottom; にして変化はありませんか？ 効かないようであれば、htmlの他の部分での指定が効いているんでしょう。
関連するQ&A
- 同一セルでの垂直方向の位置揃えについて
同一セルでの垂直方向の位置揃えについて よろしくお願いいたします。 tableタグを使用して表を作成しております。 最後の列のセルだけテキストとimgを配置したいのですが、 その際、テキストは必ずセル内中央に、imgは必ずセル内下部に配置するような 事は可能でしょうか？ 行によって高さが変わるのでmargin,padding等ではセル内の特定の位置に表示できず、 vertical-alignをセルに適用すればどちらかは出来るのですが、 同一セル内で vertical-align:middle; vertical-align:botom; のような事が同時に実現出来る指定などあるでしょうか？ 下記のような感じなんですが、 <table> <tr> <td>このセルは高さが100px</td> <td>テキストは中央にimgは下部に配置したいセル <a href="a.html"><img src="a.jpg" height="10" /></a> </td> </tr> <tr> <td>このセルは高さが200px</td> <td>テキストは中央にimgは下部に配置したいセル <a href="b.html"><img src="a.jpg" height="10" /></a> </td> </tr> </table> どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- 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>（その１） </A> </TD> <TD width="450" bgcolor=""> テスト（その１）の説明文<BR> 二行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test02.html" CLASS="widelink"> テスト（その２） </A> </TD> <TD width="450" bgcolor=""> テスト（その２）の説明文<BR> 二行目<BR> 三行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test03.html" CLASS="widelink"> テスト（その３） </A> </TD> <TD width="450" bgcolor=""> テスト（その３）の説明文<BR> 二行目 </TD> </TR> </TABLE> ------------------------------------------------------------------ この記述だとリンク文字がセルのTOPに来てしまい、中央寄せになりません。 思いつく限りの場所にvertical-alignやvalignを仕込んでみましたがダメでした。 line-heightであわせる方法もやってみましたが、<BR>を含むリンク文字の表示が二行揃ってくれず、ダメでした。 セル自体をリンクにして、さらにリンク文字を上下中央寄せにしたいのですが、やり方をご存知の方、教えてください。
- 締切済み
- HTML
- htmlで縦の中央揃えが上手くいきません。
htmlで縦の中央揃えが上手くいきません。 vertical-align : middleでいけると思われるのですが、上手くいきません。 下記の部分です。 <div style="vertical-align : middle;"> <a href="http://www.yahoo.co.jp/"><img src="logo.png" /></a> > <a href="http://okwave.jp">okwave</a> > thispage </div> 何か間違えているでしょうか？ それとも、テキスト以外は揃わないのでしょうか？
- 締切済み
- HTML
- 【HTML/CSS】ブロック内の中央揃え
HTML初心者です。 tableのセルにリンクを張り、cssで {display:block;} と設定し、セル単位で別ページへリンクできるようにしました。 しかし、blockで設定するとセル内のリンクが中央揃えになりません。 text-alignやvertical-alignを設定しても中央揃えできません。 手をこまねいているのでアドバイスがほしいです。 よろしくお願いします。
- 締切済み
- インターネットビジネス
- DIVボックス内でのCSSを使用した縦位置指定方法
CSSにてheight、weightを指定したDIVタグの中にテキストを記述し、縦位置の中央揃えを行いたいのですが、方法がわかりません。 "vertical-align:middle;"などを指定しましたが、適用されませんでした。 スタイルに関することは全てCSSで行いたいので、TABLEタグなどでvalignを指定する方法は取りたくありません。 何かいい方法をご存知の方がいらっしゃいましたら、ご回答をよろしくお願いいたします。
- 締切済み
- HTML
- コンテナ内で文字を中央に表示したい
<div> <table border=0 cellspacing=0 cellpadding=0 style="width: 100%; height: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> Hello! </td> </tr> </table> </div> のように、テーブルを使わずに（できればCSSなどで）divタグ内のテキストを中央に表示したいのですが、できますか？ よろしくお願いします。
- ベストアンサー
- HTML
- セルを結合して中央揃えを行うとセルに入力した文字の縦位置がずれる
セルを結合して中央揃えを行うとセルに入力した文字の縦位置がずれます。対処法を教えてください。 横隣りのセルを結合すると、中央揃えなのに少しだけ上にずれます。 結合を解除すると中央揃えになります。 結合しても、中央揃えにする方法を教えてください。
- 締切済み
- その他([技術者向] コンピューター)
- スタイルシートでの文字位置の指定
正方形の中心に文字があるようなデザインにしたくて 次のように記述したのですがうまくいきません。 .text{ height : 160px; width : 160px; color : #FFFFFF; padding: 0px; margin: 0px; background-color: #6C3C1F; font-size: 15pt; text-align: center; vertical-align: middle; font-weight: bold; } 横位置はきちんと中央揃えになりますが、 縦の位置は文字が正方形内で上揃えになってしまいます。 どうすれば希望のデザインにできるか教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- 画像の横にテキストを縦方向中央に配置したい
画像の右側にテキストを縦中央揃えにしたく、下記のように記述しました。 <style type="text/css"> img {height:100px; vertical-align: middle; } h3{display:inline;} </style> <img src="画像.jpg"> <h3>タイトル</h3> タイトルが短いときはよいのですが、長くなると2行目が画像の下段にいってしまいます。 このHTNLの記述では無理でしょうか？
- ベストアンサー
- CSS
- CSS 画像横に改行があるテキストを高さ中央で
画像の右側にテキストを回り込ませ、 そのテキストを、高さ中央揃えにしたいのですが テキストに改行がある場合には どのようにしたら良いでしょうか？ テキストに改行があるために vertical-align:middle; を使うとテキストの<br>以下が画像下に回り込んでしまいます。 vertical-align:middle; を使うと、改行以下も画像の横に表示されますが、 上揃えとなってしまいます。 何かもっと違う方法が良い方法があれば教えてください。 お願いします。
- 締切済み
- CSS
補足
失礼しました。リンクを間違えていました。 http://www.1uphp.com/con1/table/cell-link.html こちらです