如何在表格单元格内将div对齐到底部

Question

我希望第二个div的内容与图像底部对齐。

<table>
  <tr>
    <td>
      <div>
        <div style="float: left;">
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"  style="max-width: 200px; max-height: 200px;"/>
        </div>
        <div style="float: right; vertical-align: bottom;">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

- Vitaly P

Answer 1

你可以使用 table 和 table-cell 属性来实现此功能。

<table>
  <tr>
    <td>
      <div style="display:table">
        <div style="display:table-cell">
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"  style="max-width: 200px; max-height: 200px;"/>
        </div>
        <div style="vertical-align: bottom; display: table-cell">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

尽管我建议您在单独的CSS文件或嵌入式中进行样式设置，而不是添加行内样式。 例如：

.outer {
  display: table;
}

.inner {
  display: table-cell;
  vertical-align: bottom;
}

<table>
  <tr>
    <td>
      <div class="outer">
        <div>
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"  style="max-width: 200px; max-height: 200px;"/>
        </div>
        <div class="inner">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

如果您想将文本放置在底部，同时又希望居中对齐，您可以添加 text-align: center。

- Chris

Answer 2

您可以将display: table-cell添加到表格内的div元素中：

table tbody tr td div div {
  display: table-cell;
}

<table>
  <tr>
    <td>
      <div>
        <div>
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="max-width: 200px; max-height: 200px;" />
        </div>
        <div style="vertical-align: bottom;">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

- Alex Char

Answer 3

给你的第二个div添加margin-top，它将对齐到图片的右下角

<div style="float: right; vertical-align: bottom; margin-top:135px;">
          I want this text be on the same line as the bottom of the image
</div>

- Amar

Answer 4

请尝试这个：

<table>
  <tr>
    <td>
      <div style="display:table">
        <div style="display:table-cell">
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"  style="max-width: 200px; max-height: 200px;"/>
        </div><br>
        <div style=" vertical-align: bottom;display: table-cell ">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

演示

- Ivin Raj