如何在頁面上設置按鈕位置

我正在致力於主要利用引導程序的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

如何在頁面上設置按鈕位置

回答

相關問題