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?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (6)
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>
yatay olarak ortalamak istersen, kapsayıcının belli bir genişliği olmalı. Diyelim ki var, o zaman şu değerleri verirsen
button {
left: 50%;
transform: translateX(-50%);
}
butonun içindeki genişliği bilmene gerek kalmaz dinamik olarak yatayda ortalayabilirsin. Dikeyde de ortalamak istersen
button {
top: 50%;
transform: translateY(-50%);
}
her iki eksen için istersen
button {
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
örnek bir kullanım
<div>
<button>test</button>
</div>
<style>
div {
width: 100%;
height: 200px;
border: 1px solid #ccc;
position: relative;
}
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
</style>
burada önemli olan dediğim gibi buton position uygulanınca kapsayıcıda belli bir yükseklik ve genişlik yoksa sorun yaratır min. bir değer vermen gerekir ki ona göre ortalama işlemi yapabil.
