アプリ版：「スタンプのみでお礼する」機能のリリースについて

縦方向の位置決め

解決済

  • 質問者：makoji
  • 質問日時：
  • 回答数：2件

何故か<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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： abril
  • 回答日時：

まず、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などでお好みのスタイルを設定してあげるだけですので、楽だと思いますが？こういうマークアップではダメな理由がおありですか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

タグの中のvalign属性とスタイルシートの中のvertical-align属性の違いを良く理解していませんでした。勉強になりました。

ありがとうございます。

通報する
お礼日時：2009/05/05 10:23

No.1

  • 回答者： nakayan57
  • 回答日時：

<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>
高さ２４で、中身をＴＯＰ（上部に寄せろ）となってます。

よって
上下２つのどちらの枠（セル）ともに
画像が上にぴったりくっ付いてる状態だと思いますよ。

上のセルは、高さ指定すると上に空間できます。
下のセルは、ＴＯＰ指定を変えれば上部に空間できます。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報