Как представить двухэлементный формат в CSS?

Question

У меня уже давно есть эта проблема.

В любом случае, учитывая этот код:

<table>
<tr>
    <td><img src="" /></td>
    <td valign="middle">Text</td>
</tr>
</table>

Рендеринг формата с изображением слева и текстом по центру справа от него. Это работает, потому что тогда у меня может быть многострочный текст, и изображение по-прежнему будет «красиво».

Теперь, в идеале, таблицы должны использоваться только для табличных данных, да? Итак, как я могу представить это в CSS?

Я думаю <div> теги? Но я инкапсулирую весь бит в поле <p> с style = "display: table; border: 1px solid black;", и я боюсь, что относительные элементы div могут в конечном итоге выступить из коробки, что потребует настройки я не хочу делать в CSS ...

Помощь!

Answer 1

<div style="vertical-align: middle;">
 <img style="float:left;" src="" alt="" />
 <p>Your text</p>
</div>

Answer 2

HTML:

<div id="container">
<img src="..." />
<p>text</p>
</div>

CSS:

#container {
 width: 200px;
}

#container img, #container img{
 width: 100px;
 float: left;
}

Answer 3

не имеет значения, какие теги вы используете (особенно после сброса css). вам просто нужно установить тег-обертку display: table; и теги вложенных ячеек на display: table-cell;, после чего вы можете использовать vertical-align, вам также может понадобиться разместить еще больше тегов вокруг содержимого, чтобы воссоздать истинную таблицу, а не строки таблицы.