Вертикальное выравнивание изображения внутри таблицы в нижней

Типичная проблема выравнивания CSS:Вертикальное выравнивание изображения внутри таблицы в нижней

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter --> 
    <tr> 
     <td style="padding:0;"> 
     <div style="height:100%; width:100%; background-color:#abc; position:relative;">   
      test of really long content that causes the height of the cell to increase dynamically 
     </div> 
     </td> 
     <td> 
      <div>text</div> 
      <div ></div> 
      <img style="vertical-align: bottom;" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/1118727_100000298033362_1412277170_q.jpg"/> 
     </td>  
    </tr> 
</table>

http://jsfiddle.net/R5TAY/

Как бы я сделать изображение всегда появляются в нижней части таблицы, а текст Оставайтесь посередине?

Благодаря

источник

2013-12-06 Rafał Saltarski

Что должно произойти, чтобы текст в этой ячейке, которая приходит перед изображением? Должен ли он также появиться внизу, застрял в верхней части изображения? – j08691

Он должен предпочтительно оставаться посередине, где все это сейчас. Извините, я не объяснял. Я редактировал свой вопрос. –

Основываясь на вашем примере, вы можете использовать позиционирование для достижения того, что вы хотите:

td { 
    position:relative; 
} 
img { 
    position:absolute; 
    bottom:0; 
}

jsFiddle example

источник

2013-12-06 14:39:37 j08691

-3

Набор VALIGN донизу

<td valign="bottom">

Надеется, что это помогает

источник

2013-12-06 14:25:59 Grumpy

должен быть сделан css вместо атрибута, который устарел или даже не поддерживается больше в html5 –

Вы можете установить свойство vertical-align CSS:

#your_td { 
vertical-align: bottom; 
}

Смотрите эту FIDDLE

источник

2013-12-06 14:26:57 tobspr

Вертикальное выравнивание изображения внутри таблицы в нижней

ответ

Смежные вопросы