1

我正在尝试在这里做一些非常简单的事情。我只想让我的文本出现在它所在的表格单元格的底部。但我想在 CSS 中完成，而不是在 html 标记本身中。

为什么下面显示的代码不起作用？在下面的示例中，我的文本出现在单元格的中间，而不是底部。为什么？

<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

用这个

<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

您可以使用 vertical-align属性对齐文本

于 2013-02-22T05:15:58.237 回答
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 回答