是否可以将带有图像的表格中的文本居中并让它们都成为链接？
发布于2023-02-03 03:31 阅读(552) 评论(0) 点赞(13) 收藏(2)
我想让表格图像和文本在同一单元格中垂直和水平居中。我试过文本对齐和垂直对齐，但文本只会显示在图像之前或之后。诀窍是我希望图像和文本也是一个链接。是否可以像这个例子一样将文本设置在带有图像的单元格的中心？
th {
text-align: center;
vertical-align: middle;
}<table style="width:100%;">
<tr>
<th style="width:33.33%;"><a href="#"><img src="https://www.w3schools.com/HOWTO/img_snow_wide.jpg" alt="alt" style="width:100%"></a>CENTER</th>
<th style="width:33.33%;"><a href="#"><img src="https://www.w3schools.com/HOWTO/img_snow_wide.jpg" alt="alt" style="width:100%"></a>CENTER</th>
<th style="width:33.33%;"><a href="#"><img src="https://www.w3schools.com/HOWTO/img_snow_wide.jpg" alt="alt" style="width:100%"></a>CENTER</th>
</tr>
</table>解决方案
您可能在这里谈论背景图像和背景大小属性：
th {
background-image: url(https://www.w3schools.com/HOWTO/img_snow_wide.jpg);
background-size: contain;
font-size: 24px;
font-weight: bold;
}
工作代码：https ://codesandbox.io/s/pensive-panna-qbnkut?file=/index.html:345-531
另一种方法是将包含文本的 div 绝对定位在“th”元素的中心，并像您现在使用的那样使用“img”元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
table {
width: 100vh;
height: 50vh;
margin: 0 auto;
}
th {
background-image: url(https://www.w3schools.com/HOWTO/img_snow_wide.jpg);
background-size: contain;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<tr>
<th>
CENTERED Text
</th>
</tr>
</table>
</body>
</html>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/497286/fa6e277244f1939ca17c/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力