Текст в нижнем центре в ячейке и изображение в верхнем центре в той же ячейке - PullRequest
Новая
       17

Текст в нижнем центре в ячейке и изображение в верхнем центре в той же ячейке

0 голосов
/ 05 марта 2020

Я хочу расположить изображение и текст в одной ячейке, изображение сверху и текст снизу. Я попытался добавить р вертикальное выравнивание: снизу; но это не работает.

Прошу помощи, кто-нибудь знает, как это сделать?

Мой код: 

table {
    height: 400px;
    width: 400px;
}

td {
    border: 1px solid;
}

img {
    display: block;
    margin: auto;
    margin-top: 5px;
}

.top { vertical-align: top; }


p{
  text-align: center;
  vertical-align: bottom;
}
<table>
    <tr>
        <td class="top">
            <img src='https://dummyimage.com/100' />
            <p>text</p>
        </td>
         <td class="top">
            <img src='https://dummyimage.com/100' />
            <p>text</p>
        </td>
    </tr>
    <tr>
        <td class="top">
            <img src='https://dummyimage.com/100' />
            <p>text</p>
        </td>
         <td class="top">
            <img src='https://dummyimage.com/100' />
            <p>text</p>
        </td>
    </tr>
</table>
...