Css 在桌子内垂直对齐

我正在尝试垂直对齐1中的图像和文本

。我知道，如果我把图像放在1

中，把文本放在另一个中，它只是复制的，大约有50行。基本html：

<td>
  <img src="img.png" /><strong>Headline!</strong><br />Supporting blurb, not bolded.
</td>

好的，所以在当前状态下，img（比文本高）是垂直对齐的，但是文本似乎与顶部对齐。如果我取出br并将文本行放在单独的p标记中，它看起来是一样的。如果我去掉img上的浮点数，它和强文本都是垂直居中的，但是在br之后，它显然会转到一个新行，在图像下面。我希望它有两个img和文本垂直对齐…但文本去一个新的一行后的强标签

我看了很多答案，但都不管用

这很好（您错过了

）：

$（文档）.ready（函数（）{
var textHeight=$（“#文本容器”）.height（）；
var imgHeight=$（“表td img”）.height（）；
变量填充=（imgHeight-textHeight）/2；
$（“#文本容器”）.css（'padding-top'，padding+'px'）；
});
td{
填充：0.5em0；
文本对齐：左对齐；
高度：100px；
背景色：红色；
}
td-img{
浮动：左；
垂直对齐：中间对齐；
右边距：1米；
最大宽度：48px；
宽度：20%；
高度：自动；
}
#文本容器{
浮动：对；
填充顶部：20px；
}

标题

支持广告语，不加粗。
它在一个表中，只是没有包含它。我不能在td上加一个高度…虽然这似乎不会伤害小提琴。虽然我注意到提琴中的文本与灰色img的顶部对齐…但“不加粗”下面的红色比“标题”上面的红色要多@qazser哦，好的，对了，我只是用
height
进一步说明它是有效的：）@qazser如果你能提供更多的HTML和任何其他有效的CSS，我可以进一步研究它。然而，它应该从你给出的工作。所以td的高度是由全屏宽度的img决定的。我可以添加一个媒体查询，但对于一些应该有效的东西来说，它似乎太庞大了@简单的克雷格，如果你读了htis，请看我上面的评论，因为它是经过编辑的。啊…这就是问题所在。如果你有确切的代码，我可以复制n paste，但搞清楚它可能不是我的拿手好戏。html和css都很好……编码，不是很多。有趣的是，在问这个问题之前，这是我仔细看了很久的线索之一。谢谢你的回复，顺便说一句。
td {
    padding: 0.5em 0;
    text-align: left;
    vertical-align: middle;
}

td img {
    float: left;
    margin-right: 1em;
    max-width: 48px;
    vertical-align: middle;
    width: 20%;
}