Question

我正在研究this项目主要使用bootstrap。我在导航栏下面添加了一个基本横幅。在这个横幅的顶部，我还添加了一个按钮，可以帮助用户访问联系表单。这个按钮的主要问题是，即使在我发现它当前的屏幕居中（可能仍然不完全居中）之后似乎没问题，当屏幕变小时，它看起来完全失真。无论用户的设备如何，保持此按钮位置不变的最佳解决方案可能是什么。

以下是横幅部分和按钮的html：

 <div class="img-wrapper">
    <img style="width: 100%; height: 100%" src="https://images.unsplash.com/16/unsplash_5263605581e32_1.JPG">
    <a class="btn btn-outline-secondary" href="#" role="button">Contact me </a>
 </div>

这是我找到并申请的css：

.img-wrapper {display:inline-block;position:relative;}
.btn {position:absolute;right:47%;top:90%;}

Answer 1

您可以使用bottom代替top和transformX进行水平定位。这会使按钮水平居中居中，因为您通过使用图像底部的固定高度来避开百分比，所以当视口缩小时，按钮会保留在图像上。

工作示例：

.img-wrapper {
  position: relative;
}
.btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="img-wrapper">
  <img class="img-fluid" src="https://images.unsplash.com/16/unsplash_5263605581e32_1.JPG">
  <a class="btn btn-outline-secondary" href="#" role="button">Contact me </a>
</div>

如何使页面上的按钮位置响应

1 个答案: