Question

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

但遗憾的是，背景图像被每个表格单元切割下来。

我已经尝试了两件事：

1.将表格转换为div并设置背景图像。这是有效的，但我不能在浮动条的中间和中心显示按钮。这需要将表转换为div：

display:absolute;

如何将按钮居中？

或者我的第二个解决方案是创建一个叠加div并将此div设置为import numpy as np y, x = np.mgrid[:60:10, :6] a = y + x print(a)并带有背景图像。但同样的问题。如何使按钮居中，并且还存在叠加包装器位于文本上方的问题..

我认为方式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>

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

1 个答案: