Question

我正在筹划一个Enter Page，但我不知道如何设置“按钮”的位置。

以下是我将如何获得该职位的一个例子：

Click here

任何人都可以帮助我吗？

Answer 1

制作一个方形div，位于文档的中心。然后使用绝对定位将按钮锚定到div的角落。

.container {
  width: 200px;
  height: 200px;
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
}

.container > input { position: absolute; }

.container > input:first-child {
  top: 0;
  left: 0;
}

.container > input:nth-child(2) {
  top: 0;
  right: 0;
}

.container > input:nth-child(3) {
  bottom: 0;
  left: 0;
}

.container > input:last-child {
  bottom: 0;
  right: 0;
}

<!DOCTYPE html>
<html>
<body>
  <div class="container">
    <input type="button" value="Button1">
    <input type="button" value="Button2">
    <input type="button" value="Button3">
    <input type="button" value="Button4">
  </div>
</body>
</html>

Answer 2

我在jsfiddle中制作了四个按钮。

text-align:center;

请看：https://jsfiddle.net/wLqfv0cx/5/

如何在位置正确设置图像

2 个答案: