Question

我有一个包含默认个人资料图片的表格。最初可能没有文本内容，我的CSS样式被创建为允许文本环绕默认图像。

我在尝试静态定位图像时遇到问题，仍然允许文本环绕图像，并且文本也可以在单元格顶部附近开始垂直定位。

我基本上使用CSS作为我的图像：

.TextWrap {
    float:right;
    margin:10px;
    height:100px;
    width:100px;
}

然后为图像和文本内容设置我的div元素，如下所示：

<img class="TextWrap" src="@ViewBag.Photo" />
<div id="bio" style="position:relative;top:0px;">
     <div style="color:#FFFFFF;text-align:left;margin-left:15px;margin-right:15px;">@Model.Bio</div>                     
</div>

问题可以在这里看到：http://jsfiddle.net/2mT4X/

在“全文”示例中，文本和图像的位置距离页面顶部的距离相同，这是我正在尝试完成的任务。

在“部分文本”示例中，您可以看到文本和图像仍然相对位于一起但由于文本内容较少，因此两个元素都已下降到单元格的大致中心位置。

我想控制文本和图像的位置，因此无论文本输入的字符数是多少，两者都始终与单元格顶部的距离设置（包括文本换行）。

我正在寻找的内容类似于顶部的垂直对齐，但Table Cells似乎忽略了样式属性。

我对CSS有点精通，但绝不是专家，可以使用一些指导。

Answer 1

您可以使用此行获得所需的效果：

td { vertical-align: top; }

它的作用是将元素的顶部与该线上最高元素的顶部对齐。

<强> jsFiddle demo.

Answer 2

将vertical-align: top提交给td

这是更新的代码。 http://jsfiddle.net/2mT4X/1/

Answer 3

td { vertical-align: top; padding-top: 10px; }

将单元格顶部的内容对齐，并将10px填充添加到顶部。

http://jsfiddle.net/2mT4X/2/

如何使用CSS保持一致的文本和图像定位

3 个答案: