Question

有没有其他正确的方法在底部显示文本，因为使用Display：Table-Cell，我不能使用margin属性。

div.Product2 {
    display: table-cell;
    width: 250px;
    height: 120px;
    text-indent: 15px;
    vertical-align: bottom;
    padding-bottom: 10px;
    letter-spacing: 1px;
    background: url('../images/cp_bg.png') no-repeat center 10px #008f00;

}

Answer 1

我认为你可以在没有table-cell的情况下执行此操作的唯一方法是使用多个div。您可以选择保留table-cell并将其放在包装器中div，也可以将文本放入子div

＆＃13;

div.Product2 {
    /*display: table-cell;*/
    width: 250px;
    height: 120px;
    text-indent: 15px;
    /*vertical-align: bottom;*/
    padding-bottom: 10px;
    letter-spacing: 1px;
    background: url('../images/cp_bg.png') no-repeat center 10px #008f00;
    position: relative;
}

div.product3 {
    position: absolute;
    bottom: 0;
}

＆＃13;

<div class="Product2">
  Some Text  
  <div class="product3">
     Bottom Text
  </div>
</div>

＆＃13;

Answer 2

实现此目的的一种方法是将文本包装在包含元素（如<p>）中，并应用CSS转换。除非您使用一些前缀，否则这当然不会得到广泛的支持。

.Product2 {
    width: 250px;
    height: 120px;
    text-indent: 15px;
    padding-bottom: 10px;
    letter-spacing: 1px;
    background: #008f00;
}

.Product2 p {
    position: relative;
    top: 100%;
    transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
}

<div class="Product2">
    <p>Blah blah</p>
</div>

Answer 3

另一种方式是line-height，因为height已修复，line-height是一个很好的解决方案。无需改变您的结构。移除display:table-cell和vertical-align: middle。

div.Product2 {
    width: 250px;
    height: 120px;
    text-indent: 15px;
    padding-bottom: 10px;
    letter-spacing: 1px;
    background: url('../images/cp_bg.png') no-repeat center 10px #008f00;
    line-height:220px;
}

<div class="Product2">
    Hello World!
</div>

DIV底部的文本，不使用显示：CSS中的表格单元格

3 个答案: