セル内のリンク文字を中央に配置したい
- テーブルタグを使用してセル内のリンク文字を中央に配置する方法を教えてください。
- セル内の文字数が増えると、セルの高さが２倍になってしまい、セル内の文字も上下に離れてしまう問題についての解決策を教えてください。
- widthを600pxに設定し、tableを横４つ並べて隙間をあけたいが、border-spacingを使用してもうまくいかない場合の対処法を教えてください。
- ベストアンサー
セル内のリンク文字を中央に配置したい
セル内のリンク文字を中央に配置したい テーブルタグにdisplay:blockを使ってセル全体がリンクできるようにしたのですが、セル内の文字数が増えると(８文字以上になると？)２行になる分、高さが２倍になってしまい、セル内の文字も上下に大きく離れてしまいます。 文字数が２行になる場合でもセルの中央にリンク文字を配置し、高さも２倍にならないようにするにはどうしたらいいか教えてください 全体のwidthを600px, tableを横に４つ並べて一つ一つのtableの大きさを width: 130px; height: 70px; table同士の隙間をあけたかったのでborder-spacing: 20px;とってあります th a{width: 130px; line-height: 70px; display:block;} も入れてあります cssもホームページ作りも慣れていないのでうまく説明できていないかもしれませんが、よろしくお願いします。
- ririka369
- お礼率75% (3/4)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （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
お礼
詳しく教えてくださってありがとうございます やってみたのですが、２行だった文字が３行になって高さが３倍になってしまいました・・・ でも新しいことを知ることが出来て勉強になりました これから参考にさせていただきます
関連するQ&A
- 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
- CSSを使ってテーブルでセル全体をリンクしたい
CSSを使ってテーブルでセル全体をリンクしたい CSSを使ってテーブルでセル全体をリンクしたい・・・と思っています。 ４つのセル？を横並びにして（２段目は説明書き）、一つ一つ違うところに飛べるようにしたいのですけど、文字だけしかリンクできません。。。 block要素？を使うらしい？ということはわかったのですが、テーブル要素と組み合わせて使う場合どうしたらいいのでしょう？ 色々やってみたのですが、セルが縦並べになってしまったりメインのcolorがなくなってしまったり、形が大幅に崩れたりしてしまいました。 ホームページ作りもＣＳＳも初めてなので、なにをどうしたらよいか教えていただけると嬉しいです ソースをのっけておきます ＜ｃｓｓの方＞ table#table-01 { width: 600px; border: 0px #E3E3E3 solid; border-collapse: separate; border-spacing: 20px 0; } table#table-01 th { width: 130px; height: 70px; padding: 5px; border: #E3E3E3 solid; border-width: 1px 0 0 1px; background: #F5F5F5; font-weight: bold; line-height: 120%; text-align: center; } table#table-01 td { vertical-align: top; padding: 1px 3px 20px 0; border: 0px #E3E3E3 solid; border-width: 0; text-align: center; } ＜ｈｔｍｌの方＞ <table id="table-01" cellspacing="20px"> <tr><th>●●●●</th><th>▲▲▲</th><th>■■■</th><th>○○○</th></tr> <tr><td>●の説明</td><td>▲の説明</td><td>■の説明</td><td>○の説明</td></tr> よろしくお願いします
- ベストアンサー
- HTML
- 画像にリンクの文字を重ねる方法
こんにちは。 ブログのトップページの上段に画像を配置して、右上に文字でメニューのようなものを配置したいと思っています。 画像に文字を重ねて、文字をクリックするとジャンプするようなイメージです。 一つの文字を重ねる事はできたのですが、複数の文字を右へ増やしていく事ができません。 画像の右上に | リンク1; | リンク2; | リンク3; | のようなイメージです。 現状のHTMLは以下です。 <a href="飛ばすURL" style="display:block; text-align:right; width:910px; height:100px; background: url(http://画像のURL); no-repeat;">リンク先1;</a> お手数ですがご教授お願いします。
- 締切済み
- HTML
- リンク領域の拡大
リンク領域を拡大したいのですが、横幅はできても高さができません。 例えば、高さ３０ｐｘで、文字が１５ｐｘの場合、どうしても文字の部分にしかカーソルが反応しません。 ボックスいっぱいにリンク領域を拡大する場合どうしたらよいのでしょうか？ .td_navi a{ display:block; background:#FFFFFF; width:100%; padding:4px 0 4px 0; text-align:center; } 何を付け加えればよいでしょうか？ height:100%; とすると文字が中央に表示されなくなり、バランスが悪くなってしまいます。 どなたかご教授を。。
- ベストアンサー
- HTML
- ホームページのブロック配置 Float
Float left のブロックの右に別のブロックを配置したいのですが float right 指定しても回り込んでくれません。一度は上手くいったようにみえたのですが。 原因と注意点をお教え下さい。 --------------------------------------------------------------------------- | header | |--------------------------------------------------------------------------- | dspbody (menuとtopを含む) | | ------------------------------------------------------------------------- | | menu | top | |--------------------------------------------------------------------------- | footer | ---------------------------------------------------------------------------- 【テスト中のスタイルシート】 * { margin:0; padding:0; } body { /* background-color:#ffffff; *//*内容全体の背景色*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#pagebody { width:1000px; margin:0 auto; /*内容全体をセンタリング*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#header { height:136px; /*背景画像のサイズに合わせてボックスの高さを指定*/ text-align:center; /*テキスト・画像の配置を中央揃えにする*/ background-image: url(img/FF054_change.png); background-repeat: repeat-x; } div#dspbody { width:1000px; height:800px; background-color: #999999; } div#menu { width:152px; height:800px; margin:0; float:left; /*内容全体を左に配置*/ text-align:left; /*テキストの配置を左揃えにする*/ /* background-color: "saddlebrown"; */ background-image: url(img/FF085_change.png); /* background-repeat: repeat-y; */ } div#top { /* width:700px; height:600px; */ float:right; text-align:center; /*テキストの配置を中央揃えにする*/ font-size: 9pt; background-color: #ccffcc; } div#top table { margin: auto; /*テーブルの配置を中央揃えにする*/ } div#footer { clear:both; text-align:center; /*テキストの配置を中央揃えにする*/ } a:link { color: yellow} a:visited { color: yellowgreen}
- ベストアンサー
- その他([技術者向] コンピューター)
- 文字をセル下部にぴったりくっつけたい
お世話になります。 テーブル(の<td></td>)内に入れた文字を、セルの下部ボーダーにぴったりくっつけるように配置したいと思っているのですが、IE6でうまく文字の表示ができません。 その文字には font.●● {font-size:35px; font-weight:bolder; font-family:Verdana; color:#332600; letter-spacing:-2px; } とCSS指定し、またテーブルタグの方には <table cellspacing="0" cellpadding="0"> と <td valign="bottom"> を指定しています。 これで、Firefoxだときちんと表示されるのですが IEだと文字が潰れる、というか上下が欠けたように表示されてしまいます。 ためしに行間指定 line-height:100%; をつけくわえてみたところ、IEでの文字はきちんと表示されるようになったのですが、 テーブル下部のボーダーから浮いてしまい思ったようなレイアウトになりません。 (Firefoxも同様に浮いてしまいます) 文字を欠けなく表示し、また下部ボーダーにぴったりくっつけるやり方がありましたら教えてください。 よろしくお願いいたします。
- 締切済み
- HTML
- ボックス内中央配置特殊版
<div><img src="sss.jpg"></div> でdivの中央に画像を配置したいとき cssで実現しようと思ったら div{ width:100px; height:100px; display:table-cell; text-align:center; vertical-align:middle; } あたりでできそうですが、画像がボックスより小さい場合はこれでいいのですが、 今回やりたいのはボックスより大きな画像の中央をボックスの中央に配置し、 ボックスからはみ出したものはover-flow:hiddenで見切りたいのです。 cssだけで実現可能でしょうか？ js使って画像をposition:ablosute にして位置計算する手は頭に浮かんでますが、もっとシンプルにできそうな気がして質問してみました。
- ベストアンサー
- HTML
- レイアウトを常に中央に配置したい
始めまして、まったくの初心者で御座いますが、 下記現在レイアウト(テーブル)、左よりになっていますが、ブラウザの幅や大きさや、デイスプレイのサイズにかかわらず。 常に中央に配置したい場合、下記をどう書き換えればよいでしょうか、 宜しくお願い致します。 <style type="text/css"> <!-- body { font-size:80%; background:#fff; color:#000; } table.form { border:1px solid #7777bb; border-collapse:collapse; margin-top:1em; } table.form th,td { text-align:left; border:1px solid #7777bb; padding:8px; font-weight:normal; } table.form th { background:#cccce6; } table.form td { background:#f0f0f0; width:500px; } strong.ttl { text-align:left; border-left:solid 4px #cc0000; display:block; padding:2px 5px; margin-top:1.5em; } input.button { width:90px; } --> </style> 宜しくお願い致します。
- ベストアンサー
- その他([技術者向] コンピューター)
- CSS 文字と写真を横並びにして中央配置
お店のホームページを作っていて どうしてもできない箇所があるので質問させて頂きます。 レスポンシブの伸縮するフッターに、左に住所を文字で記載して 右に地図の画像を配置したものを、フッターの中央に配置したいと考えています。 <div style="float:left; margin-right:20px; width:220px;"> 東京都.......<BR> 03-.......<BR> </div> <div style="float:left; width:220px;"> <img src="../map.jpg" /> </div> こんな感じで、２つの要素を横並びにはできたのですが どうしても中央配置にできません。。。 さらに、ブラウザーの横サイズを小さくしていくと 要素が縦並び(上：住所 下：地図)になって中央配置にしたいと考えています。 とても簡単そうなのですが、まる２日間 いろいろ試して、どうしても解決できないので どなたかアドバイス頂けると幸いです。 よろしくお願いいたします。
- ベストアンサー
- CSS
- エクセルのセル内の文字配置について
1つのセルにつき文字を100字程度かいています。 もちろん、1行では書けないので、「セルの書式設定」→「配置」タブの「折り返して全体を表示する」にチェックマークをしているので、数行に渡って表示されています。 このとき、セルの高さは自動的に調節されて全体（数行）が表示されると思うのですが、たまに最初の行と最後の行が半分切れたりします。行の高さの自動調整をしてもこの状態になります。手動で高さを高くすれば問題は解決するのですが、いまいち納得できません。 また、このような文章の詰まったセルがたくさんありますので、印刷した後に文章の行が切れていることにきづいたりして、困っています。 何か良い手立てはありますか？
- 締切済み
- オフィス系ソフト
お礼
おぉ！！出来ましたっっ ありがとうございます ほとんど私が思っていたのと同じ形になりました １行ですむところはspanで囲まずにやってみたら文字が上にのぼってしまったので全部のa要素をspanで囲んでみました ホントにありがとうございました