如何在页面上设置按钮位置

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

这里是横幅部分和按钮的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%;}

来源

2017-02-10 Sam

可以使用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>

来源

2017-02-10 14:18:02 vanburen

如何在页面上设置按钮位置

回答

相关问题