程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

是否可以将带有图像的表格中的文本居中并让它们都成为链接?

发布于2023-02-03 03:31     阅读(643)     评论(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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

13 0
收藏该文
已收藏

评论内容:(最多支持255个字符)