• 締切済み

テキストを垂直方向でセンターにしクリッピングするには

ある四角の枠にテキストを表示させる場合ですが、垂直方向でセンターに表示させたい場合、<tr valign="middle">で実現できるのですが、文字が垂直方向にオーバーフローした場合、クリッピングされません。 何か対象方をご存知の方、ご教授ください。

  • HTML
  • 回答数1
  • ありがとう数2

みんなの回答

回答No.1

多分無理。 http://www.w3.org/TR/CSS21/tables.html#height-layout 当方の実験ではIE 7/Opera/Minefield共に縦方向にoverflow:hiddenを効かせる事ができなかった。(というかtableやtrにheightを設定できなかった) table系の各種要素の高さは, 後に「内容によって必要とされる高さ」と比較され、 どちらか「高い」ほうが実際に利用されるから、収まらないという事態が発生しないのだと思う。

tornado-x
質問者

お礼

himajin100000さん 回答頂きまありがとうございます。 参考にさせて頂きます。

関連するQ&A

  • 同一セルでの垂直方向の位置揃えについて

    同一セルでの垂直方向の位置揃えについて よろしくお願いいたします。 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
  • 【CSS】divの中で縦方向の中央揃えは、どうやってかくのでしょうか?

    すいません、divの中で縦方向の中央揃え、つまり、 divの代わりにtableタグの中のtdで書いた場合の、 <td valign="middle">ほげほげ</td> と同じことをdivで実現するにはどうすればいいのでしょうか? ご存じの方いらっしゃったら、よろしくお願いいたします。

  • CSSでテキストを垂直、中央に設定する方法

    はじめまして。 現在、CSSを勉強中のものですが、タイトルにあるCSSでテキストを垂直方向に中央に配置する方法がわかりません。 clearfix { margin-top: 0px; text-align: left; width: 530px; height: 100px; vertical-align: middle; } とクラスで設定したのですが、DWのデザイン画面はもちろん、ブラウザで確認してもちゃんと表示されません。 解決方法を教えていただけないでしょうか? どうかよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ボックス中のテキストのミドリング

    ボックス内でテキストをミドリング(垂直方向の中央そろえ)しようと思い、次のボックスの記述をしました: #dick { width: 400px; height: 300px; margin: 0px; padding: 0px; text-align: center; vertical-align: middle; } ですが、まったく効果がありません(vertical-align がないときの挙動と同様です)。 代わりに text-valign を入れると、IE から「CSS エラ: 未知のプロパティ text-valign」と怒られてしまいました(おそらく私が勝手に類推した記述で、存在しないのでしょう)。 余白、詰め物や位置情報などボックスの変化によらず、テキストの位置だけをミドリングする方法を教えてください。

  • テーブルにリンクをはった場合のテキストの表示位置

    http://okwave.jp/qa/q2259695.html ↑こちらを参考にて、テーブルにリンクをはることはできたのですが、テキストの表示位置を「 valign="middle"」と設定してもテーブルの中央に表示されず、上に表示されてしまいます。(「align="center"」はできます) テーブルの中央にテキストを表示させてい場合、どうしたら良いのか教えてください。 お願いします。

  • css tr align="center" valign="middle"

    こんにちは、 CSSで <tr align="center" valign="middle">に該当するものって何になるのでしょうか? DremWeaver8でCSSスタイル一覧で探すことができませんでした。 何かお分かりの方がいましたら教えてください。 よろしくお願いします。

  • 垂直方向中央に整列に関する質問

    Illustratorで、垂直方向中央というものに関しての質問です。 2つのオブジェクトを選択した後に、垂直方向中央を実行すると、 両方の中央の位置が揃いますが、2つのオブジェクトがどちらとも移動してしまいます。 これを、片方の位置を固定して、もう片方だけが移動して、 中央位置が揃うようにするにはどうしたら良いのでしょうか? 垂直方向上に整列の場合だと、固定したい方ではないオブジェクトを少し下に下げておいて、 実行することで、所望するオブジェクトの位置を変えずに 位置を揃えることが出来ますが、 垂直方向中央では、一度オブジェクトをコピーするなどして、 元の場所を覚えておくような、一手間が必要になるのでしょうか?

  • テキストボックスの表示

    テキストボックスの表示 テキストボックスを2つ横に並べて表示したいのですが、 <html> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="308" height="300" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストA </Td></Tr> </Table></div> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="200" height="200" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストB </Td></Tr> </Table></div> </html> これで、記述をすると縦に二つ表示されます。 スタイルシートを使用しないと無理でしょうか?

    • ベストアンサー
    • HTML
  • テーブルに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
  • 柿の剪定:垂直方向の徒長枝

    昨年の冬、放任して大きくなりすぎた庭の柿の木を強剪定してコンパクト(h3m程度)にしました。今年も何とか実も成り、これから今年の剪定をする予定です。去年との大きな違いは垂直方向への徒長枝がかなりの数あります。 そこで質問ですが実の収穫を考えた場合、これらの垂直に立った徒長枝は全て選定すべきでしょうか? (柿は種類が多くて素人では特定しずらいのですが平たい四角の甘柿なのでおそらく富有柿か次郎柿じゃないかなと思います。)

専門家に質問してみよう