何故か<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>
No.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などでお好みのスタイルを設定してあげるだけですので、楽だと思いますが?こういうマークアップではダメな理由がおありですか?
ありがとうございます。
タグの中のvalign属性とスタイルシートの中のvertical-align属性の違いを良く理解していませんでした。勉強になりました。
ありがとうございます。
No.1
- 回答日時:
<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で列内の枠(セル)は全てミドル(上下の中心へ)となってますが、
高さ指定が無いので上下が中身のサイズで決まります。
まず最初に来る画像は上にぴったりくっ付きます。
その後、順に表示されていく訳ですが…
画像の後、テキストの回りこみ指定も無ければ改行タグも無いですね。
Hタグだから勝手に行が変わるでしょ。って感じですかね。
Divタグだからこれまた勝手に行が変わるでしょって。
で、枠としてはDivの持つ行間スペースで下部に空間ができてる状態ですね。
<td height="24" valign="top">
<img src="img/w_subject.gif" width="80" height="23" alt="タイトル">
<h3>[re] 다시 문의요-</h3>
</td>
高さ24で、中身をTOP(上部に寄せろ)となってます。
よって
上下2つのどちらの枠(セル)ともに
画像が上にぴったりくっ付いてる状態だと思いますよ。
上のセルは、高さ指定すると上に空間できます。
下のセルは、TOP指定を変えれば上部に空間できます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript htmlとcssに関する質問です 3 2022/12/06 05:36
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
cssで、テーブルのtdの中の文字...
-
テーブルの一部分のセルだけに...
-
ブラウザによってテーブルのセ...
-
<img>タグにCSSのclass設定可能?
-
tableがbodyにはみ出る。。
-
同じwidth=200でもセル内の文字...
-
このHTXLソースが意味する動作...
-
テーブルの線を点線にする
-
Tableタグで作成した表の縮小
-
Visual Studio で CLR 開発でデ...
-
センタリングしたページの印刷
-
特殊文字の検索方法
-
丸角テーブルの簡単な作り方
-
<TD div id="new">←こういうの...
-
CSS+HTMLでTBODYスクロールさせ...
-
formのinputなどの幅100%指定
-
ie8のcssでcol要素のwidthがき...
-
Firefoxを使ってるのですがズー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
テーブル内のテーブルの高さを...
-
XHTMLに関する質問 順序が逆に...
-
Tableタグ内のspan styleが適応...
-
Tableタグで作成した表の縮小
-
ブラウザによってテーブルのセ...
-
cssで、テーブルのtdの中の文字...
-
td要素内のdiv要素をセンタリン...
-
vbscriptで時計を作りたい
-
formのinputなどの幅100%指定
-
Firefoxを使ってるのですがズー...
-
テーブルの枠線に色が付かない
-
divで囲んだ文字が消える
-
TDタグ内での均等割付の仕方
-
表とリスト(ulとtable)の違い...
-
firefoxで「height: 100%;」と...
-
<img>タグにCSSのclass設定可能?
おすすめ情報