table 单元格中的文本位于顶部和底部

Question

我得到以下设置：

<div class="table">
    <div class="cell">Cell 1 [fixed width]</div>
    <div class="cell">Cell 2</div>
    <div class="cell">Cell 3 [fixed width]</div>
</div>

用这个 css:

.table {
     display: table-cell;
     width: 100%;
}
.cell {
     display: table-cell;
     vertical-align: middle;
}

现在我想在 单元格 3 中添加一些文本。应该在单元格底部的一些文本。使用 vertical-align 我可以很容易地做到这一点，但我得到了另一条线，它应该留在单元格的中间或顶部。我怎样才能做到这一点？我尝试了一些高度设置，但这些对单元格没有影响。行高也不行，因为高度不固定。

Answer 1

这是您要找的吗？

.table {
  display: table;
  width: 100%;
  border: 2px solid red;
}
.cell {
  display: table-cell;
  height: auto;
  vertical-align: middle;
  text-align: center;
  border: 1px solid black;
}

<div class="table">
  <div class="cell">Cell 1 [fixed width]</div>
  <div class="cell">Cell 2</div>
  <div class="cell">Cell 3 [fixed width]
    <br>additional line</div>
</div>

Answer 2

查看以下答案： Fiddle

<div class="table">
    <div class="cell1">Cell 1 [fixed width]</div>

    <div class="cell2">Cell 2</div>

    <div class="cell3">Cell 3 [fixed width] <div class="bot_txt">bottom text</div></div>
</div>


.table {
     display: table;
     width: 100%;
}
.cell1 {
     display: table-cell;
     vertical-align: middle;
     width: 33%;
    height:200px;
    background-color:red;
}
.cell2 {
     display: table-cell;
     vertical-align: middle;
     width: 33%;
    height:200px;
    background-color:green;
}
.cell3 {
    background-color:yellow;
     display: table-cell;
     vertical-align: top;
     width: 33%;
    height:200px;
    position:relative;
}
.bot_txt {
    position:absolute;
    bottom:0px;
}

table 单元格中的文本位于顶部和底部

Text in table-cell on top and bottom

css

html-table

tablelayout

text-align