Html 在同一表格单元格中垂直和水平居中文本，图像向左浮动

我知道这可能是个小问题。只是觉得应该有一个简单的解决办法。我觉得我是索尔，但我想我应该先问一下

问题: 当图像不向左浮动时，它会产生所需的最终结果，即图像和文本都垂直居中。将图像向左浮动时，图像垂直居中，文本与图像顶部对齐

要求：

• 一个表单元格
• 仅使用给定html的CSS（或对html的最小更改）
• 我希望避免使用行高解决方案，因为样式表应用于许多现有页面，其中一些页面在文本中有多行

---

只需对html进行最小更改（将标题文本包装在

中）


表格{
宽度：500px；
边框：实心1px黑色；
}
表td{
文本对齐：居中；
垂直对齐：中间对齐；
填充物：5px；
位置：相对位置；
}
表td img{
宽度：50px；
垂直对齐：中间对齐；
显示：内联块；
}
表td p{
显示：内联块；
宽度：430px；
背景：#ccc；
垂直对齐：中间对齐
}

标题文本




标题文本
在下一行

您可以使用负边距方法垂直居中文本。为此，您可以将文本放入
中，并使用以下css：

table
{
    width: 500px;
    border: solid 1px black;
}

table td
{
    text-align: center;
    vertical-align: middle;
    padding: 5px;
    position: relative;
}

table td img
{
    width: 50px;
    vertical-align: middle;
}

table.float td img
{
    float: left;
}

table.float td span
{
    position: absolute;
    top: 50%;
    margin-top: -10px; /* or half of the height of your text */
}

在他的案例中，它需要很多调整——“样式表应用于许多现有页面，其中一些页面在文本中有多行”这是一个很棒的解决方案。不幸的是，我忘了提到我正在开发一个支持IE7的旧应用程序，它仍然以怪癖模式运行（我们很快就要重写了）。这并不能改变你完美地回答了我的问题的事实。非常感谢。