Выравнивание изображений в нижней части таблицы

Question

В настоящее время пытаюсь выровнять изображение в нижней части таблицы.В настоящее время он естественным образом возвращается к вершине.Я перепробовал все, но изображение все еще находится в верхней части таблицы.

</table>
<td class="logo-label">

    <table>
        <img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" height="36" width="113">
        </td>
   </table>

Я знаю, что это будет что-то простое, но в данный момент я не могу понять, почему изображение не движется,

Answer 1

Прежде всего, структура HTML совершенно неверна.<td> и </td> являются ячейками таблицы, поэтому они лежат между <tr> и </tr> (строки таблицы).<tr> и </tr> лежат между <table> и </table> (сама таблица).Структура таблицы показана ниже:

<table>
  <tr>
    <td>Cell contents here</td>
  </tr>
</table>

Вы можете иметь сколько угодно <tr> s и <td> s.

Таблица по умолчанию не имеет ширины.Другими словами, его ширина установлена ​​на auto, т.е. она принимает ширину его содержимого.Установите атрибуты width и height, чтобы избежать этого.Таблица также не имеет границ по умолчанию.Установите border="1", чтобы сделать границы видимыми.

Чтобы выровнять изображение к основанию его родительского элемента (в данном случае <td>), один из способов сделать это - установить position:relative для родительского элемента.элемент и установите position:absolute для дочернего элемента.Затем установите bottom:0 для дочернего элемента.Затем изображение будет выровнено по нижней части элемента.Ниже приведен фрагмент всего процесса.

<table border="1" width="500" height="300">
  <tr>
    <td style="position: relative">
      <img style="position:absolute; bottom:0" src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
    </td>
  </tr>
</table>

В вашем правиле logo-label CSS также могут быть некоторые правила, о которых мы не знаем.

Answer 2

Прежде всего, это настоящий беспорядок.Во-вторых, вам нужно взглянуть на свой CSS-файл и посмотреть, что делает «логотип-метка».Это контролирует выравнивание изображения.

<table>
    <tr>
        <td class="logo-label">
            <img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
        </td>
    </tr>
</table>