Forum
Aktif konular
Üyeler
Kurallar
Arama
Bootstrap Ve CSS Hakkında Yardım Bootstrap Ve CSS Hakkında Yardım
-
Arkadaşlar herkese mutlu haftalar kolay gelsin,
Bir konuda takıldım uzman arkadaşların yardımlarına ihtiyacım var. Sayfa düzen tasarımı yapıyorum mümkün oldukça bootsrap düzeni dışına çıkıp harici java ve cssler eklemek istemiyorum ama aşağıda hazırladığım düzeni bootstrapta en basit nasıl yapabilirim?
html tablo yapısında asında istediğim oluyor ama bu sefer responsivede buzuyor aslında bootstrapdaki tek sorun soldaki yazı alanlarındaki içerikler tablonun üst kısmına yapışması. Onu tabloya içeriklerle ortalayamadım. Yapmak istediğim sonucu aşağıda görselle anlatamayaçalıştım.
Şuanki bootstrap kodumda ;
<div class="row">
<div class="col-md-6">
<h4 align="center"><b><span style="font-size: 200%;">ÜRÜN BAŞLIĞI</span></b><br />
<b><span style="font-size: 100%;">ÜRÜN KATEGORİSİ</span></b></h4>
<h6 align="center">Detaylar açıklamalar bilgiler...</h6>
<div class="text-center"><button class="btn btn-primary" type="button">DETAYLI İNCELE</button></div>
</div>
<div class="col-md-6">
<img class="img-responsive" src="http://placehold.it/555x330/" />
</div>
</div>Bu konuda öneri ve paylaşımlarınız için şimdiden teşekkürler.
-
Yazı alanını ortalamak istiyosun anladığım kadarıyla bunu table-cell ile yapabilirsin. içeriği kapsayan bir div oluştur bu div'e display:table ver içeriğin olduğu kısımada örneğin h3 olsun bunada text-align: center; display: table-cell; vertical-align: middle; vereceksin
Örnek olarak style içinde verdim sen css alırsın
<div class="row">
<div class="col-md-6" style="height:500px; border:solid 1px #333; display:table">
<div style="text-align:center; display: table-cell; vertical-align: middle;">
<h4 align="center"><b><span style="font-size: 200%;">ÜRÜN BAŞLIĞI</span></b><br />
<b><span style="font-size: 100%;">ÜRÜN KATEGORİSİ</span></b></h4>
<h6 align="center">Detaylar açıklamalar bilgiler...</h6>
<div class="text-center"><button class="btn btn-primary" type="button">DETAYLI İNCELE</button></div>
</div>
</div>
<div class="col-md-6">
<img class="img-responsive" src="http://placehold.it/555x330/" />
</div>
</div>
-
çok teşekkürler hocam oldu :) eline sağlık.
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla