ページ上のボタンの位置をどのようにするか

Question

私はthis主にブートストラップを利用しているプロジェクトに取り組んでいます。私はnavbarの下に基本的なバナーを追加しました。このバナーの上に、ユーザーが連絡フォームにアクセスするのを手助けするボタンも1つ追加しました。 このボタンの主な問題は、現在の画面中央揃え（正確には中心線ではないかもしれません）を見つけた後も大丈夫ですが、画面が小さくなると完全に歪んだように見えます。ユーザーのデバイスに関係なく、このボタンの位置を変更しないでおくと最適な解決策は何でしょうか。

<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

あなたはtransformXとともにbottomの代わりtopを使用することができます。ここ

は、バナーセクションとボタンのhtmlですあなたの水平方向の位置決めのために。これにより、ボタンを中央に中央に配置し、画像の下部から一定の高さを使用して割合を避けているので、ビューポートが縮小されたときにボタンを画像の上に保ちます。

実施例：

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