- ベストアンサー
縦方向の位置決め
何故か<td>の中の文字が上に寄っているんです。 こういう時、物の本によると、vertical-align属性とかvalign属性とかを使うそうです。 で、使ってみたんですけど、何も変わらないのは何故？ すみません。教えてください。 ***************************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <style type="text/css"> <!-- *{ font-size: 12px; font-weight: normal; } body { width: 476px; } img { float: left; } h1 {margin: 0px; } h2 {float: left; font-weight: bold; } .divTitle { border: 1px solid #999999; } .divTitle tr { vertical-align: middle; } .date {float: right; } --> </style> </head> <body> <table class=divTitle width="476" cellpadding="0" cellspacing="0"> <tr valign="middle"> <td> <img src="img/w_name.gif" width="80" height="23" alt="投稿者"> <h2>관리자</h2> <div class="date">(2009-04-26 13:47:39, Hit : 6, Vote : 0)</div> </td> </tr> <tr> <td height="24" valign="top"> <img src="img/w_subject.gif" width="80" height="23" alt="タイトル"> <h3>[re] 다시 문의요-</h3> </td> </tr> </table> </body> </html>
- makoji
- お礼率39% (76/193)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
まず、valign属性とvertical-alignプロパティの解釈に混乱が見られます。 <tr valign="middle"> これはOKです。このtrでvalign属性にmiddleの値が与えられていれば、（子要素のtdに対して直接その値を打ち消す様な指定がされていない限り）その行のセル（td）は全て垂直方向の中央揃えになります。 しかし、一方の： .divTitle tr { vertical-align: middle; } これはNG、というか無効です。vertical-alignプロパティが適用されるのは、インライン要素と表の「セル」要素であるtdとthだけです。trは表の「行」要素ですから、行自身には垂直だろうが水平だろうが「位置を揃える」という状態を持ち得ません。 なので、「その行の子要素のセル全てに対して垂直方向の中央揃えを指定したい」というのであれば： .divTitle tr th, .divTitle tr td { vertical-align: middle; } ですし、もっと突き詰めればthもtdもtrの子要素としてしか存在しないので、省略して： .divTitle th, .divTitle td { vertical-align: middle; } で充分です。 それから、tdの中の要素を全て（img、h2、h3、div）floatで浮かせてますよね。これでは、親要素のtdでいくら垂直方向の位置揃えを指定していても、無効です（ご存知かもしれませんが、floatはtext-alignとは全く性質が異なります）。 いまいち、どの様なレイアウトを希望されているのかがわかりかねるところがあるのですが、 「投稿者」という画像 投稿者の名前 日付 「タイトル」という画像 [re]タイトル これらの2行のそれぞれの項目を、その行内で垂直方向に中央揃えにしたい、という事ですか？ であれば、マークアップの面でも、現状の様に一つのセルの中で無理矢理h(n)やらdivやら使って右に左に浮かせるのではなく、素直にセルを分けられた方が良いのでは？ <table class="divTitle" width="476" cellpadding="0" cellspacing="0"> <tr> <th><img src="img/w_name.gif" width="80" height="23" alt="投稿者"></th> <td class="name">관리자</td> <td class="date">(2009-04-26 13:47:39, Hit : 6, Vote : 0)</td> </tr> <tr> <th><img src="img/w_subject.gif" width="80" height="23" alt="タイトル"></th> <td class="title" colspan="2">[re] 다시 문의요-</td> </tr> </table> こんな感じで、あとはそれぞれのセル（th, td）に対してtext-align、vertical-align、padding、場合によってはwidthなどでお好みのスタイルを設定してあげるだけですので、楽だと思いますが？こういうマークアップではダメな理由がおありですか？
その他の回答 (1)
- nakayan57
- ベストアンサー率29% (94/321)
<tr valign="middle"> <td> <img src="img/w_name.gif" width="80" height="23" alt="投稿者"> <h2>관리자</h2> <div class="date">(2009-04-26 13:47:39, Hit : 6, Vote : 0)</div> </td> </tr> ＴＲで列内の枠（セル）は全てミドル（上下の中心へ）となってますが、 高さ指定が無いので上下が中身のサイズで決まります。 まず最初に来る画像は上にぴったりくっ付きます。 その後、順に表示されていく訳ですが… 画像の後、テキストの回りこみ指定も無ければ改行タグも無いですね。 Ｈタグだから勝手に行が変わるでしょ。って感じですかね。 Ｄｉｖタグだからこれまた勝手に行が変わるでしょって。 で、枠としてはＤｉｖの持つ行間スペースで下部に空間ができてる状態ですね。 <td height="24" valign="top"> <img src="img/w_subject.gif" width="80" height="23" alt="タイトル"> <h3>[re] 다시 문의요-</h3> </td> 高さ２４で、中身をＴＯＰ（上部に寄せろ）となってます。 よって 上下２つのどちらの枠（セル）ともに 画像が上にぴったりくっ付いてる状態だと思いますよ。 上のセルは、高さ指定すると上に空間できます。 下のセルは、ＴＯＰ指定を変えれば上部に空間できます。
関連するQ&A
- テーブルの縦が縮まらない
質問させて下さい。テーブルで表を作ったのですが、縦幅が 縮まらなく困っています。 具体的には、セル内の余白を５ピクセルにしているのですが テキストとセルの境界線の縦の距離が何倍も開いてしまいます。 ソース↓ （ボディ内はこれで全てです。テキストを変えただけです。 使用ソフトはドリームウィーバー８） --------------------------------------------------------- <table width="490" height="395" cellpadding="0" cellspacing="0" bgcolor="#666666"> <tr> <td width="490" height="393"> <table width="100%" height="100%" border="0" cellpadding="5" cellspacing="1"> <tr> <td width="121" height="35" align="center" valign="middle" bgcolor="#FFCCFF"><font color="#333333" size="2">ああああ</font></td> <td width="344" height="35" align="left" valign="middle" bgcolor="#FFFFFF"><font color="#333333" size="2">あああああああああ</font></td> </tr> <tr> <td height="22" align="center" valign="middle" bgcolor="#FFCCFF"><font color="#333333" size="2">ああああ</font></td> <td align="left" valign="middle" bgcolor="#FFFFFF"><font color="#333333" size="2">あああああああああ</font></td> </tr> </table> </td> </tr> </table> --------------------------------------------------------- 試したこと：各セルの縦幅を揃えて指定してみる。指定を全て 外してから、再度調節してみる。セル内のテキスト 表示位置を上位置に設定してみるなどです。。。 どこかすごい見落としをしているのでしょうか。よろしくお願い します。
- ベストアンサー
- HTML
- テーブルの位置指定について
html編集で困っています。 <TABLE cellpadding="0" border="3" bordercolor="black" style="float:left;"> <TR> <TD rowspan="3" valign="bottom" align="center" width="76" height="75" background="background.jpg"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="95" height="25"><font face="" color="#ffffff" size="1"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="50" height="25"><font face="" color="#ffffff" size="2"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="40" height="25"><font face="" color="#ffffff" size="1"></font></TD> </TR> </TABLE> というようにテーブルを組みました。 このテーブル全体を、ページ全体の中で、 左右では左寄せ、上下では中央 に配置するにはどうすればいいのでしょうか。 パソコンの画面の大きさの違いでデザインが崩れてしまうので、上のような形に配置できればとてもうれしいです。 ご教授よろしくお願いいたします。
- ベストアンサー
- HTML
- imgタグについて
imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2～ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか？ もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>
- ベストアンサー
- HTML
- 正方形のセルに縦画像、横画像を中央に配置
よろしくお願いいたします。 テーブルを使って、写真のサムネイル一覧表を作成しています。 100x100 の２つのセルをペアとして横に並べ、横画像(100w x 75h)または縦画像(75w x 100h)を入れています。 この時、横画像だけを入れたペアは、セルの高さが画像と同じ(75)になってしまいます。 常にセルの高さを 100に保つにはどのようにしたらよいのでしょうか。 現在は次のように記述しています。 <TR><!---- 高さ 100 ＯＫ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="H_100.jpg" width="75" height="100" border="0"></TD> </TR> <TR><!---- 高さ 75 ＮＧ！！ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> </TR>
- ベストアンサー
- HTML
- インラインフレーム内でのテーブル位置指定が上手くいきません
インラインフレームを使用したホームページ作成中なんですが 一箇所だけどうしても解決できないことがあったので質問させていただきます フリー素材サイトのメニューテーブルを左上フレームに使用しているんですが htmlとスタイルシートを上手く使いこなせてないせいで メニューテーブルの位置指定ができずにいます テーブルは縦につなげるタイプのものです 左上フレーム内のright bottomに指定したいのですが上手くいきません 大変見苦しい点が多いとは思いますが どなたか解決策、アドバイス等ありましたらよろしくお願いいたします 【index.html】 <html><head>～</head> <frameset cols="220,*" frameborder="no" border="0"> <frameset rows="90%,10%" frameborder="no" border="0"> <frame src="menu.html" name="menu" scrolling="no"> <frame src="sita.html" name="sita" scrolling="no"> </frameset> <frame src="top.html" name="main" scrolling="auto" > </frameset> <body>～</body> </frameset> </html> 【menu.html】 <html><head>～</head> <body> <table id="left" cellpadding="0" cellspacing="0"> <h2>サイト名</h2> <tr><td><img src=".gif" width="80" height="47"></td></tr> <tr><td><img src=".gif" width="80" height="4"></td><tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><img src=".gif" width="80" height="16"></td></tr> </table> </body> </html> 【スタイルシート】 ～ #left{ width:180px; text-align:right; vertical-align:bottom; }
- ベストアンサー
- HTML
- 同一セルでの垂直方向の位置揃えについて
同一セルでの垂直方向の位置揃えについて よろしくお願いいたします。 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
- table cellpadding「有」又は「無し」でCSSの解釈違う？
IE6,７ tableのcellpaddingをcellpadding="0"と表記してスタイルシートでセルのpaddingを指定するのと、cellpadding="0"と表記せずにスタイルシートでセルのpaddingを指定するのとでは、ブラウザーのテールブルの解釈(表示)が違うのですが、スタイルシートでセルのpaddingを指定する場合、HTMLのcellpaddingをcellpadding="0"と表記するべきですか又は表記しないべきですか？ 以下の二つのコードの違いは、<table>タグにcellpadding="0"が「ある」か「ない」かだけですが、例２のコードのテーブルの方が例1のテーブルより全体的な幅が広く表示されます。 <例１：cellpadding="0"あり> <html> <head> <style type="text/css"> .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; } .ta_ti { padding-top:5px; padding-bottom:5px; text-align:center; font-size:18px; font-weight:900; line-height:180%; } .ta_he { font-size:16px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; font-weight:900; } .ta_da { padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; } </style> </head> <body> <table class="ta" width="550" border="0" cellspacing="1" cellpadding="0"> <colgroup> <col width="200"> <col width="347"> </colgroup> <tr> <td class="ta_ti" colspan="2"> タイトル </td> </tr> <tr> <td class="ta_he"> 見出し </td> <td class="ta_da"> データ </td> </tr> </table> </body> </html> <例2：cellpadding="0"無し> <html> <head> <style type="text/css"> .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; } .ta_ti { padding-top:5px; padding-bottom:5px; text-align:center; font-size:18px; font-weight:900; line-height:180%; } .ta_he { font-size:16px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; font-weight:900; } .ta_da { padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; } </style> </head> <body> <table class="ta" width="550" border="0" cellspacing="1"> <colgroup> <col width="200"> <col width="347"> </colgroup> <tr> <td class="ta_ti" colspan="2"> タイトル </td> </tr> <tr> <td class="ta_he"> 見出し </td> <td class="ta_da"> データ </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブル内でのランダムな並べ変え
全然知識がないのですがよろしくお願いします。 タグで <table border="0"> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff"> ◆タイトル</font></td> </tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td> <td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td> </tr> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff"> ◆タイトル</font></td> </tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td> <td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td> </tr> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff"> ◆タイトル</font></td> </tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td> <td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td> </tr> </table> このようなテーブルがあって、その順番をページ更新でタイトル・画像・文書を一枠としてクルクルランダムに入れかえたいのですが、どうしたらいいでしようか？ 今後、この一枠がドンドン増えて行って、それも含めて全ての枠をランダムに入れ替えたいのです。 jqueryで簡単にできるようなことは聞きましたが、私には知識がないので助けてください。 よろしくお願いします。 http://www.finefinefine.jp/web/kiji2068/ ここを見れとも言われたのですが、スクリプトは私には不明です・・・
- ベストアンサー
- JavaScript
- 文章を、画像の縦方向の位置の中心に置きたい
ＣＳＳを使ってｗｅｂページのレイアウトをしています。 画像の高さの真ん中あたりに、文章を配置したいのですが、方法を教えてください。 「vertical-align：middle;」で指定してみたら１行の文ではうまく行ったのですが、複数行になるとうまくいきません。 どうすれば、複数行の文章で上手く指定できるでしょうか。 [ソース] <style> .test{ width:530px; height:263px; background-color:#ffcccc; font-size:10pt; } img{ vertical-align:middle; } </style> <div class="test"> <p> テキスト<br> テキスト<br> テキスト<strong>テキスト</strong>テキスト<br> <img src="画像のURL"width="250" height="259" alt="画像の名前"> </p> </div>
- ベストアンサー
- CSS
- IE セル間に隙間が・・・
HTML初心者です。 テーブルでHPをレイアウトしたいのですが、--1と--3のセル間に微妙な隙間ができてしまいます。NNでは問題なく表示されます。通常どの様なことが原因するのでしょうか？よろしくお願いいたします。 <td width="396" height="234"valign="top"><table width="100%" height="234" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="180" rowspan="2" valign="bottom" >1 <img src="../image/***" width="180" height="180" align="bottom"></td> ------1 <td width="216" height="98" valign="bottom">***</td> </tr> <tr> <td height="136" valign="bottom" ><img src="../image/*** width="91" height="61" border="1"><br>></td> </tr> </table></td> <td width="10" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="262"></td> ------３ <td valign="top" >*** <br> </td>
- ベストアンサー
- HTML
お礼
ありがとうございます。 タグの中のvalign属性とスタイルシートの中のvertical-align属性の違いを良く理解していませんでした。勉強になりました。 ありがとうございます。