テーブルセル内の下のdivを整列する方法

Question

2番目の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>

Answer 1

2番目のdivにマージントップを追加し、それがあなたの画像の右下に揃えてしまいますプロパティ。

<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を追加することができます。

Answer 2

あなたがtableとtable-cellディスプレイでこれを行うことができます

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

あなたは、テーブル内display: table-celldivに要素を追加することができます。

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 4

は試してみてください、この1：

<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