Wie man die Position einer Taste auf der Seite reagiert

Question

Ich arbeite an this Projekt hauptsächlich mit Bootstrap. Ich habe ein einfaches Banner unterhalb der Navigationsleiste hinzugefügt. Zusätzlich zu diesem Banner habe ich einen Button hinzugefügt, der Nutzern helfen soll, das Kontaktformular zu erreichen. Das Hauptproblem mit dieser Taste ist, dass, obwohl es in Ordnung scheint, nachdem ich seine aktuelle Bildschirm-Zentrierung gefunden (vielleicht immer noch nicht genau zentriert), wenn der Bildschirm kleiner wird es völlig verzerrt aussieht. Was ist die beste Lösung, um die Position dieser Taste unabhängig vom Gerät des Benutzers unverändert zu lassen? Hier

ist der HTML-Code für das Banner Abschnitt und die Schaltfläche:

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

und dieser die CSS habe ich gefunden und angewendet werden:

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

Answer 1

Sie bottomtransformX statt top zusammen mit nutzen können für Ihre horizontale Positionierung. Dadurch wird die Schaltfläche horizontal zentriert, und da Sie einen Prozentsatz vermeiden, indem Sie eine feste Höhe vom unteren Rand des Bildes verwenden, halten Sie die Schaltfläche über dem Bild, wenn das Ansichtsfenster verkleinert wird. Beispiel

Arbeits:

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