1

ここでは非常に単純なことをしようとしています。テキストが含まれているテーブルセルの下部にテキストを表示したいだけですが、htmlタグ自体ではなく、CSSでそれを行いたいです。

以下に示すコードが機能しないのはなぜですか? 以下の例では、テキストはセルの下部ではなく中央に表示されます。なんで？

<style type="text/css">
    .myClass2 {
        color:red;
        font-weight:bold;        
        font-style:italic;            
        vertical-align:text-bottom;        
        text-align: center;
    }
</style>

<table bgcolor="black" border="1">
    <tr>
        <td bgcolor="white" class="myClass1" width="300">        
            <div class="myClass2">            
                Why won't this align at the bottom?
            </div>                    
        </td>
        <td height="100" bgcolor="white">
               Something very tall here.
        </td>
    </tr>
</table>
4

5 に答える 5

3

追加tr td{vertical-align:bottom}

あなたのコードでは、それが整列していない理由ではvertical-alignないため、divに与えました。td

デモ

最初のセル テキストのみを揃える場合は、以下のコードを追加します。

td:first-child {vertical-align:bottom}

デモ 2

位置値の使用

 .myClass2 {
        color:red;
        font-weight:bold;        
        font-style:italic;            
        vertical-align:text-bottom;        
        text-align: center;
    background:green; 
    width:100%;
    position:absolute; 
    bottom:0
    }
tr td{position:relative}

デモ 3

于 2013-02-22T05:14:07.347 に答える
0

vertical-alignプロパティを使用してテキストを揃えることができ ます

于 2013-02-22T05:15:58.237 に答える
0

これを使って

<style>
    .myClass2 {
            color:red;
            font-weight:bold;        
            font-style:italic;            
            vertical-align:bottom;        
            text-align: center;
        }
    </style>
    <table bgcolor="black" border="1">
        <tr>
            <td bgcolor="white" class="myClass2" width="300">        
                <div class="myClass2">            
                    Why won't this align at the bottom?
                </div>                    
            </td>
            <td class="myClass2" height="100" bgcolor="white">
                   Something very tall here.
            </td>
        </tr>
    </table>
于 2013-02-22T05:17:09.987 に答える
0

さて、私はあなたが使うべきだと思います：

<style type="text/css">
.myClass1 {
position:relative;
}
.myClass2 {
    color:red;
    font-weight:bold;        
    font-style:italic;  
    position:absolute;
    bottom:0;
    left:0;
    vertical-align:bottom;        
}
</style>

<table bgcolor="black" border="1">
<tr>
    <td bgcolor="white" class="myClass1" width="300">        
        <div class="myClass2">            
            Why won't this align at the bottom?
        </div>                    
    </td>
    <td height="100" bgcolor="white">
           Something very tall here.
    </td>
</tr>
</table>
于 2013-02-22T05:22:43.583 に答える
0

すでに div をオンまたはオフにすることができると思います。スタイリングだけが必要な場合は、次のようなコードを使用できます。

<style type="text/css">
.myClass1 td .myClass2 {
    color:red;
    font-weight:bold;        
    font-style:italic;            
    vertical-align:text-bottom;        
    text-align: center;
}
</style>

<table bgcolor="black" border="1" class="myClass1">
<tr>
    <td height="100" bgcolor="white" width="300">
           Something very tall here.
        <div class="myClass2">            
            Why won't this align at the bottom?
        </div>                    
    </td>
</tr>
</table>
于 2013-02-22T05:55:55.417 に答える