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

Question

I want the content of the second div to be bottom-aligned with the image.

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

Answer 1

You can do this with the table and table-cell display properties.

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

Though I'd suggest you do the styling on a separate CSS file or embedding it, rather than adding it inline. Example:

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

If you want to have the text at the bottom, but also centered, you can add text-align: center .

Answer 2

You can add display: table-cell to div elements inside table:

 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> 

Answer 3

Add margin-top to your second div and it will get aligned to the right bottom of your image

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

Answer 4

Please try this one:

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

DEMO