- ベストアンサー
css tr align="center" valign="middle"
こんにちは、 CSSで <tr align="center" valign="middle">に該当するものって何になるのでしょうか？ DremWeaver8でCSSスタイル一覧で探すことができませんでした。 何かお分かりの方がいましたら教えてください。 よろしくお願いします。
- norinori1
- お礼率67% (674/994)
- その他(業務ソフトウェア)
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
trにalignとvalignの設定って何を意図されているのでしょうか？ tdの中身について、上下左右共に中央寄せしたいということなら、 上下はvertical-align 左右はtext-align になるかとおもいます
関連するQ&A
- モバイルで表示するゴルフスコアのデザイン
お世話になっております、めぐみと申します。 4.7インチ程度のモバイル画面にかっこいいゴルフスコアが表示できないか悩んでいます。 自分で作っては見たもののあまりよくないです。 あまり、データを大きくしたくないので極力gif等使用したくはないですが、多少なら使ってもよいかと思っています。 色合いがきれいで、丸みとかあったほうがいいのかと考えてはいるのですが。。。 もし、何か良いアイデアがありましたらどんな些細なことでも結構ですのでアドバイス頂けないものでしょうか。 以下、HTMLを貼り付けます。 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1"> <tbody> <tr> <td bgcolor="#4C6E29" style="color: #FFFFFF">日付</td> <td colspan="11" bgcolor="#4C6E29" style="color: #FFFFFF">2018.02.19</td> </tr> <tr> <td rowspan="2" bgcolor="#4C6E29" style="color: #FFFFFF">場所</td> <td colspan="11" bgcolor="#4C6E29" style="color: #FFFFFF">〇〇ゴルフ場In</td> </tr> <tr> <td colspan="11" bgcolor="#4C6E29" style="color: #FFFFFF">〇〇ゴルフ場Out</td> </tr> <tr> <td rowspan="4" bgcolor="#4C6E29"> </td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">1</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">2</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">3</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">4</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">5</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">6</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">7</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">8</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">9</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">小計</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">実績合計</td> </tr> <tr> <td align="center" valign="middle" bgcolor="#98A51C">-1</td> <td align="center" valign="middle" bgcolor="#98A51C">1</td> <td align="center" valign="middle" bgcolor="#98A51C">0</td> <td align="center" valign="middle" bgcolor="#98A51C">0</td> <td align="center" valign="middle" bgcolor="#98A51C">1</td> <td align="center" valign="middle" bgcolor="#98A51C">-2</td> <td align="center" valign="middle" bgcolor="#98A51C">0</td> <td align="center" valign="middle" bgcolor="#98A51C">2</td> <td align="center" valign="middle" bgcolor="#98A51C">0</td> <td align="center" valign="middle" bgcolor="#98A51C">1</td> <td align="center" valign="middle" bgcolor="#98A51C">+15</td> </tr> <tr> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">10</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">11</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">12</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">13</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">14</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">15</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">16</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">17</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">18</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">小計</td> <td align="center" valign="middle" bgcolor="#4C6E29" style="color: #FFFFFF">打数合計</td> </tr> <tr> <td align="center" valign="middle" bgcolor="#98A51C">2</td> <td align="center" valign="middle" bgcolor="#98A51C">1</td> <td align="center" valign="middle" bgcolor="#98A51C">-1</td> <td align="center" valign="middle" bgcolor="#98A51C">1</td> <td align="center" valign="middle" bgcolor="#98A51C">2</td> <td align="center" valign="middle" bgcolor="#98
- ベストアンサー
- その他（インターネット・Webサービス）
- テーブルにCSSの枠のつけ方
はじめまして、こんにちわ。 HTMLで組んだテーブルにCSSの枠をつけたいと思っています。 ここのページhttp://www.rakuten.ne.jp/gold/royalparty/ の『NEW ITEMS』みたいに1列4行に枠をつけたい場合はどうしたら良いのでしょうか。よろしくお願いいたします。 組んだテーブルは下です。 <table class="newtable" cellspacing="0" cellpadding="0" border="0" width="610"> <tbody> <tr> <td class="photo" valign="middle" align="center" width="138"> 1-1 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-2 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-3 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-4</a></td> </tr> <tr> <td valign="top" align="left" width="138"> 2-1</a> </td> <td valign="top" align="left" width="138"> 2-2</a> </td> <td valign="top" align="left" width="138"> 2-3 </a> </td> <td valign="top" align="left" width="138"> 2-4</a> </td> </tr> <tr> <td valign="top" align="left" width="138">3-1</td> <td valign="top" align="left" width="138">3-2</td> <td valign="top" align="left" width="138">3-3</td> <td valign="top" align="left" width="138">3-4</td> </tr> </tbody> </table>
- ベストアンサー
- HTML
- CSSでセル内の文章の縦位置をTOPにしたい
テーブルを作成しました。セルの数は随時増やしていく予定にしてます。 デフォルトではmiddleになっている縦方向の位置をCSSを使って一括でTOPに設定しておきたいのですが…タグに<tr valign="top">と設定すればよいのですが、行数が増える一方になるので、できるだけ内容をスッキリさせたいところです。CSSで設定できればいいなと思います。横位置はtr{text-align:center}で指定できるようですがtr{text-valign:middle}とやっても変化がなかったので（強引）… よい方法がありましたら教えて下さい。宜しくお願い致します。
- ベストアンサー
- HTML
- align="middle"が無視される TOPに
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title lang="ja">文書タイトル</title> </head> <body> <div style="text-align:center;" style="font-size:400%;"> <IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle"> test <IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle"> </div> </body> </html> これをブラウザで表示すると、align="middle"とやってるのに、画像のように文字がTOPの位置に表示されてしまいます。 <div style="text-align:center;" style="font-size:400%;"> がなければ、文字は画像のど真ん中に表示されるのですが、 font-size:400%;はまだしも、画像もブラウザの真ん中に表示させたいので <div style="text-align:center;"で画像と文字を挟みたいです。 どうすれば、画像＆文字をブラウザの真ん中に表示させつつ、文字を画像の真ん中に表示できるのでしょうか？
- ベストアンサー
- HTML
- CSSを使った丸ナンバー付きテーブルの挿入
HTMLで作成した丸ナンバー付きテーブルをスタイルシートを使って挿入しようと思っているのですが、肝心の数字の部分が真っ白になってしまいました。関係しそうなところだけ抜き出してみました。 （↓headの中に書いてある） body {background-color: white; background-image: url(dolp2.gif); color: #000000} table, td {width: 800px; border: 2px #C0C0C0 solid; border-collapse: collapse; background-color: #ffffff;} （↓body以下に書いてある） <div><Table border="0"><Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> １ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい１＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ２ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい２＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ３ </Td></Tr></Table></div> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい３＝＝＝ </Td></Tr></Table> このようなタイプのものはheadやcssにあげたほうがいいのでしょうか？ 最初はこのままbodyのなかに収めておこうかと思っていたのですが、上記のような事態になってしまったのでどうしたらいいのか困っています。 HTML初心者なので、なにとぞ宜しくお願いします。
- ベストアンサー
- HTML
- xhtmlでvalignが反映されずこまっています。
xhtmlでvalignが反映されずこまっています。 はじめて質問させていただきます。こんにちは。 xhtmlで画面のちょうど真ん中に内容を配置したくて、試しているのですが どうしてもうまくいかないため、こちらで質問させていただいています。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>テスト</title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta name="ROBOTS" content="NONE" /> <meta name="generator" content="mi" /> </head> <body> <table cellpadding="0" cellspacing="0" height="100%" width="100%"><tr valign="middle"><td align="center"> 内容テスト </td></tr></table> </body> </html> のように記述しているのですが、valignが反映されません。 なぜだかheightとwidthを400などの数値にしてみたら反映されました。 ですが、ほかの解像度から観覧しても、内容が真ん中に表示されるようにしたいです。 MacBook 10.6、miで作成しており、確認はfirefoxで行っています。 いろいろ検索してcssからvertical-alignやwidthやheightを指定したりも試したのですが、うまくいきません。 どなたかおわかりになる方がいらっしゃいましたら、ぜひ教えてください。 よろしくお願い致します。
- ベストアンサー
- HTML
- <div align="center">を使わずにCSSだけでセンター表示する方法？
現在、CSSでホームページを作っているのですが、IEではうまくセンター表示できるのですが、firefoxなどでは左によってしまいます。 bodyに<div align="center">を記載せずにCSSだけでセンターに表示させることは出来ないものでしょうか？ちなみにIEでセンターによってしまうのはバグだと聞いたことがあるのですが、本当でしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- img の align 属性を css に変更したいが、位置がずれる
img タグで、align 属性 top, middle, bottom を使用して 文章中の図の位置を調整していました。 CSS での位置表示に変更しようと思い、 align="..." を class="..." に変更し、CSS で img.top {vertical-align: top;} img.middle {vertical-align: middle;} img.bottom {vertical-align: bottom;} と設定しましたが、alignで設定していたときと位置がずれます。 解決法について探しているのですが、以下のような説明しか見つからず、 わかりません。 ■top 上端に合わせます。 ■middle 中央に合わせます。 ■bottom 下端に合わせます。 http://www.tagindex.com/stylesheet/img/vertical_align.html 解決法をお分かりの方、どうか教えてください。
- ベストアンサー
- 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
- データが消えてしまいます
サーバー上にtest.txtファイルをおいてブラウザからこのファイルの更新をしようとしているのですが、ブラウザを一回閉じてもう一度開くとtest.txtのデータが消失してしまいます、なにがいけないのでしょうか？ ファイル名「news.php」 ---------ソース抜粋-------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <title>新着情報更新画面</title> <style type="text/css"> <!-- .style5 { font-size: 16px; font-family: Geneva, Arial, Helvetica, sans-serif, "MS UI Gothic"; font-weight: bold; color: #FF9900; } .style6 { font-size: 10px; color: #990000; } .style8 {color: #FF0000; font-weight: bold; font-size: 12px; } .style13 { color: #FF9900; font-weight: bold; } --> </style> </head> <body> <div align="center"> <p class="style5"> </p> <p class="style5">新着情報更新画面</p> <form name="form1" method="post" action="<?PHP EditText($_POST['textfield1']); ?>"> <p> </p> <table width="100" border="1" bordercolor="#FF0000"> <tr> <td align="center" valign="middle" bgcolor="#FFCCCC"><span class="style8">編集エリア</span></td> </tr> <tr> <td align="center" valign="middle"><span class="style6">注意！：『￥』は全角で入力してください半角だと『\\』と表示されてしまいます</span></td> </tr> <tr> <td align="center" valign="middle"><textarea name="textfield1" cols="80" rows="9"></textarea></td> </tr> <tr> <td align="center" valign="middle"><input type="submit" name="Submit2" value="編集内容確定" onclick=""></td> </tr> </table> </form> <table width="100" border="1" bordercolor="#FF9900"> <tr> <td align="center" valign="middle" bgcolor="#FFFF66"><span class="style13">新着情報</span></td> </tr> <tr> <td align="center" valign="middle"><textarea name="textfield2" cols="80" rows="9" readonly> <?php //ファイルの読み込み if(is_readable("test001.txt")){ readfile("test001.txt"); }else{ echo "読み込みエラー\n"; } ?> </textarea></td> </tr> </table> </div> </body> </html> <?php function EditText($s){ //ファイルオープン(無ければ作成） $fh=fopen("test001.txt","w"); fwrite($fh,$s); fclose($fh); } ?> -------------------------------------------------------
- ベストアンサー
- PHP
補足
返信ありがとうございます。 MDN社のWEB Creatorsという書籍でWEBの勉強をしています。 その例題で上記のように <tr align="center" valign="middle">に なっていました。 私のほうがまだCSSのことがよくわからないので質問しました。 kalzeさんの方法でも結局うまくいきましたし、CSS上でもありました。 ありがとうございます。