如何在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

HTML：

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

CSS：

#container {
 width: 200px;
}

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

Answer 2

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

Answer 3

使用什么标签并不重要（特别是在css重置后）。您只需要将包装器标记display: table;和嵌套的单元格标记设置为display: table-cell;，之后您可以使用vertical-align您还可能需要在内容周围添加更多标记以重新创建表，惠特表行。