DIV中底部的文本不使用CSS中的Display:Table Cell

有没有其他合适的方式在底部显示文本，因为使用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;
}

我认为，在没有table-cell的情况下，唯一可以做到这一点的方法是使用多个div。您可以选择保留table-cell并将其放置在包装器div中，或者将文本放入子div 中

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;
}

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

实现这一点的一种方法是将文本包装在包含元素（如<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>

另一种方法是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>

相关内容

最新更新

热门标签：