Absolute olan butonumu nasıl doğru bir şekilde ortalayabilirim?

bukr3j 1103 gün önce

571 defa görüntülendi ve 1 kişi tarafından değerlendirildi

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

Spam olarak işaretle

Cevap yaz

1
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (6)

ebykdrms

1103 gün önce

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>

#009662

tayfunerbilen

1102 gün önce

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.

#009672

rotaile

1103 gün önce

left, right, top, bottom değerleriyle

#009669

ebykdrms

1103 gün önce

Buton yerine span kullanıp yazıyı span içinde kullanırsanız yazıları da ortalamış olursunuz. Belki bir ihtimal ortalanmazsa span'a display:inline-block stili vermeniz gerekebilir.

#009666

bukr3j

1103 gün önce

Peki bir yazıyı ortalamak için aynı şey geçerli mi?

#009664

munzevi

1103 gün önce

absolute bulundugu elementi bagimsiz konumlandirir. yonleri piksek olarak belirtmelisin. left:0 gibi veya kapsayici relative yapmalisin.

#009663