Question

这是一个简单的网页。我希望文本以及图像在单元格中垂直居中。我想要图像左侧的文字，但这应该不是问题......

你可以帮忙吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
    <link href="default.css" rel="stylesheet" type="text/css" />

</head>

<body>

<table border="1" style="width: 100%">
    <tr>
        <td class="style1">Text<img src="PdfLink.jpg" alt="Whatever"/></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td></td>
        <td>&nbsp;</td>
    </tr>
</table>

</body>

</html>

default.css。如你所愿，加入它。

body{

    font-size:12pt;
    }
}

更新

我收回了之前的一些评论，包括说Evan的答案有效。

以下工作。注意“*”。 Evan的答案不包括。 “”是什么意思？

.style1 * { vertical-align：middle; }

Answer 1

因为您正在使用表格进行格式化。只需添加.style1 { vertical-align: middle }即可。文本应保留在图像的左侧。

Answer 2

星号表示“本课程的任何后代”;但要小心使用它，因为这意味着所有后代元素都将获得特定的样式。

注意1：请注意您的CSS中有太多右括号。

注2：此外，如果文字大于图像，则您收到的其他答案将不起作用。你没有给出图像的大小。

如何将表格单元格中的文本和图像居中？

2 个答案: