Absolute olan butonumu nasıl doğru bir şekilde ortalayabilirim?
"position: absolute" olan butonumu ortalamak istiyorum. Bootstrap kullanarak yapmaya çalıştım ama yapamdım.
<div class="container">
<div class="row mt-4" style="margin-bottom: 0 !important; margin-right: 0 !important; margin-left: 0 !important; width: 100%;">
<div class="col-12 align-items-center" style="width: 100%">
<button type="button" class="btn" style="position: absolute !important" onclick="location='videos.php'">VİDEO GALERİ</button>
</div>
</div>
</div>
Bootstrap 4.6 sürümü.
Daha doğrusu absolute olan bir divimi nasıl istediğim gibi yerleştirebilirim?
Butonun kapsayıcısına position: relative; dedikten sonra butona şu stili verebilirsiniz:
position: absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
inline olarak stil verecekseniz:
<div class="container">
<div class="row mt-4" style="margin-bottom: 0 !important; margin-right: 0 !important; margin-left: 0 !important; width: 100%;">
<div class="col-12 align-items-center" style="width: 100%; position:relative;">
<button type="button" class="btn" style="position: absolute !important; left:50%; top:50%; transform:translateX(-50%) translateY(-50%);" onclick="location='videos.php'">VİDEO GALERİ</button>
</div>
</div>
</div>
Alternatif olarak flex tasarımın nimetlerinden yararlanın. position:absolute çoğunlukla başka problemler yaratabilir.
Ama flex tasarım bootstrap'ta asıl tepki verir bilemem. Denemek lazım.
Bu durumda kapsayıcıya stil vermeniz yeterli:
<div class="container">
<div class="row mt-4" style="margin-bottom: 0 !important; margin-right: 0 !important; margin-left: 0 !important; width: 100%;">
<div class="col-12 align-items-center" style="width: 100%; display:flex; align-items:center; justify-content:center;">
<button type="button" class="btn" onclick="location='videos.php'">VİDEO GALERİ</button>
</div>
</div>
</div>