通过表格单元格显示背景图像？

Question

我想在页面底部的浮动栏上设置背景图片：https://hartbodenreiniger.info/。

但遗憾的是，背景图像被每个表格单元格剪切了..

我已经尝试了两件事：

1.将表格转换为div并设置背景图片。这是可行的，但我无法在浮动栏的中间和中心显示按钮。这是将表格转换为 div 所必需的：

jQuery('#wpfront-notification-bar > table').replaceWith( jQuery('#wpfront-notification-bar > table').html()
   .replace(/<tbody/gi, "<div id='table'")
   .replace(/<tr/gi, "<div")
   .replace(/<\/tr>/gi, "</div>")
   .replace(/<td/gi, "<span")
   .replace(/<\/td>/gi, "</span>")
   .replace(/<\/tbody/gi, "<\/div")
);

如何使按钮居中？

或者我的第二个解决方案是创建一个覆盖 div 并将此 div 设置为 display:absolute; 并带有背景图像。但同样的问题。如何使按钮居中，并且覆盖包装在文本上方的问题..

我认为方式 1 是更好的方式，但我如何才能将其居中？ 您有什么想法或其他解决方案吗？

亲切的问候

Answer 1

您可以使用line-height 属性。试试下面的代码，看看有什么不同

.container{
  height: 100px;
  text-align: center;
  border: 1px solid black;
}

.the-button{
  height: 100%;
  line-height: 100px;
}

button{
  height: 30px;
}

<div class="container">
  <div class="the-button">
    <button>Hello</button>
  </div>
</div>
<div class="container">
  <div style="height:100%;">
    <button>Hi</button>
  </div>
</div>