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