Текст в таблице-ячейки сверху и снизу

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

Теперь я хочу иметь некоторый текст в Cell 3. Немного текста, который должен находиться в нижней части ячейки. С vertical-align Я мог бы сделать это легко, но у меня есть еще одна строка, которая должна оставаться на середине или в верхней части ячейки. Как я могу это сделать? Я пробовал некоторые вещи с настройками высоты, но они не влияют на камеру. И высота линии не будет работать, потому что высота не фиксирована.

Answer 1

Проверьте ниже ответ: 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; 
} 

Answer 2

Вы хотите что-то ищите?

.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>