Question

我想在页面中心并排显示两个图像，并在页面底部显示一个按钮。

当前，两个图像的对齐方式是水平居中。但是，我想要的是页面中心的两个图像。

下面是我的代码：

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 15px;
}

.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
}

.home {
  font-size: 20px;
  width: 100%;
  background-color: #2483E8;
}

<body align="center">
  <h2>Guidance</h2>
  <br>

  <table style="width:100%" id="haha">
  </table>
  <br>

  <img src="image/add.png" width="130px" height="130px">
  <img src="image/list.png" width="130px" height="130px">

  <br><br><br>
  <button class="button home" onclick="window.location.href='index.html'">HOME</button>
</body>

有人可以帮忙吗？

Answer 1

您可以使用display: flex;并使用align-items来使元素垂直居中，justify-content可以使它们水平居中。

现在要使按钮停留在底部，您可以使用position: absolute;或position: fixed;

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

button {
  position: fixed;
  bottom: 0;
  right: 0;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-size: 20px;
  width: 100%;
  background-color: #2483E8;
}

img:first-child {
  margin-right: 1em;
}

<img src="https://dummyimage.com/100x100/000/fff&text=image+1">
<img src="https://dummyimage.com/100x100/000/fff&text=image+2">


<button class="button home" onclick="window.location.href='index.html'">HOME</button>

Answer 2

在CSS中很少有这样做的方法。位置：绝对或固定或相对，例如

.button{ position: fixed; bottom: 0; }

当前，没有高位设置，因此将仅位于内容高度的中心。

也许有高度为100vh的div包装器。

希望获得帮助！

如何在页面中心显示图像，并在页面底部显示按钮

下面是我的代码：

2 个答案: