Twitter Bootstrap 3]1'de bir sütun boyutundaki bir div'i konteyner (12 sütun) içinde nasıl ortalarım?
.centered {
background-color: red;
}
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
Sınıfı .centered
olan bir div
in kapsayıcı içinde ortalanmasını istiyorum. Birden fazla div
varsa bir satır kullanabilirim, ancak şimdilik sadece kapsayıcı içinde ortalanmış bir sütun boyutunda bir div
istiyorum (12 sütun).
Yukarıdaki yaklaşımın yeterince iyi olduğundan da emin değilim çünkü amaç div
i yarı yarıya dengelemek değildir. Divin dışında boş alanlara ihtiyacım yok ve
div`in içeriği orantılı olarak küçülüyor. Div dışındaki boş alanın eşit olarak dağıtılmasını** istiyorum (kap genişliği bir sütuna eşit olana kadar küçülmesini).
Bootstrap 3'te bir sütunu <div>
ortalamak için iki yaklaşım vardır:
İlk yaklaşım Bootstrap'in kendi ofset sınıflarını kullanır, bu nedenle biçimlendirmede değişiklik ve ekstra CSS gerektirmez. Anahtar, satırın kalan boyutunun yarısına eşit bir ofset ayarlamaktır. Örneğin, 2 boyutundaki bir sütun 5'lik bir ofset eklenerek ortalanacaktır, yani (12-2)/2
.
Biçimlendirmede bu şöyle görünecektir:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Şimdi, bu yöntemin bariz bir dezavantajı var. Yalnızca çift sütun boyutları için çalışır, bu nedenle yalnızca .col-X-2
, .col-X-4
, col-X-6
, col-X-8
ve col-X-10
desteklenir.
margin:auto
)Kanıtlanmış margin: 0 auto;
tekniğini kullanarak herhangi bir sütun boyutunu ortalayabilirsiniz. Sadece Bootstrap'ın ızgara sistemi tarafından eklenen kaymaya dikkat etmeniz gerekir. Aşağıdaki gibi özel bir CSS sınıfı tanımlamanızı öneririm:
.col-centered{
float: none;
margin: 0 auto;
}
Artık herhangi bir ekran boyutunda herhangi bir sütun boyutuna ekleyebilirsiniz ve Bootstrap'ın duyarlı düzeniyle sorunsuz bir şekilde çalışacaktır:
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Not: Her iki teknikle de .row' öğesini atlayabilir ve sütunu bir
.container' içinde ortalayabilirsiniz, ancak container sınıfındaki dolgu nedeniyle gerçek sütun boyutunda çok az bir fark göreceksiniz.
Güncelleme:
v3.0.1 Bootstrap, margin: 0 auto
kullanan, ancak float:none
özelliği eksik olan center-block
adlı yerleşik bir sınıfa sahip olduğundan, ızgara sistemiyle çalışmasını sağlamak için bunu CSS'nize ekleyebilirsiniz.
Bootstrap 3 artık bu .center-block
için yerleşik bir sınıfa sahip
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Eğer hala 2.X kullanıyorsanız, bunu CSS'nize eklemeniz yeterlidir.
Bu işe yarıyor. Muhtemelen hacklenmiş bir yol, ama güzel çalışıyor. Duyarlı (Y) için test edildi.
.centered {
background-color: teal;
text-align: center;
}