css - 如何在 Position 中正确设置 Images

标签 css html

我正在计划进入页面,但我不知道如何设置“按钮”的位置。

这是我如何拥有该职位的示例:

Click here

谁能帮帮我?

最佳答案

制作一个正方形的 div,位于文档的中心。然后使用绝对定位将按钮锚定到 div 的 Angular 上。

.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>

关于css - 如何在 Position 中正确设置 Images,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37518596/

相关文章:

html - Bootstrap 在移动设备上的右拉左拉居中

html - 为什么我的自定义动画不能正常工作?

html - 如何为 ionic 日期时间选择器内联设置 pickerOptions ?

Javascript 检测菜单外的点击事件(Vanilla JS)

html - 首次打开页面时如何调整 div 的动画大小

css - 让图像突出页脚

html - 需要根据打开和关闭的括号为数组元素应用边框

html - Owl Carousel slider 不适用于 rtl

javascript - 链式选择提交按钮已停止正常运行

javascript - 我如何在 Div 的 HOVER 上使它在 div 上淡出