Bootstrap 3 kullanarak bir katalog yapıyorum. Tabletlerde görüntülendiğinde, ürün resimleri küçük boyutlarından (500x500) ve tarayıcıdaki 767 piksel genişliğinden dolayı çirkin görünüyor. Görüntüyü ekranın ortasına koymak istiyorum, ama nedense yapamıyorum. Kim sorunu çözmeye yardımcı olacak?
Yanıtlar:
Bootstrap v3.0.1 veya üstünü kullanıyorsanız, bunun yerine bu çözümü kullanmalısınız. Bootstrap'ın stillerini özel CSS ile geçersiz kılmaz, bunun yerine bir Bootstrap özelliği kullanır.
Orijinal cevabım aşağıda gelecek kuşaklar için gösteriliyor
Bu hoş bir düzeltme. .img-responsiveBootstrap zaten ayarlanmış olduğundan , görüntüyü ortalamak için display: blockkullanabilirsiniz margin: 0 auto:
.product .img-responsive {
margin: 0 auto;
}margin: 0 auto.img-duyarlı değiştirmek yerine, yeni bir sınıf oluşturmak daha iyidir.
.center-blockTwitter Bootstrap 3'te ( v3.0.1'den beri ) sınıf var, bu yüzden şunu kullanın:
<img src="..." alt="..." class="img-responsive center-block" />class="img-responsive" style="margin: 0 auto;"benim için çalışıyor class="img-responsive center-block"(bootstrap 3, ancak birkaç aylık bir sürüm)
<a href="#"> </a>çiftin içine sarılırsa , tıklanabilir alan, kapsayıcı kabınızın tam genişliğine kadar genişler ve bu da görüntünüzden biraz daha büyük olabilir. Bu, "boş" alan olduğunu düşündüklerini tıklayan kullanıcıların kafasını karıştırabilir.
center-blockBir görüntüye yalnızca sınıfı ekleyin , bu Bootstrap 4 ile de çalışır:
<img src="..." alt="..." class="center-block" />Not: kullanıldığında center-blockbile çalışırimg-responsive
.text-centerBootstrap 3 kullanıyorsanız sınıfı kullanmanız yeterlidir.
<div class="text-center">
<img src="..." alt="..."/>
</div>Not: Bu img-duyarlı ile çalışmaz
img-responsive
img-responsiveBu stil sınıfıyla diğer görüntüleri etkilemeden yine de çalışabilirsiniz .
İçine yerleştirildiği bir sırayı tanımlamak için bu etiketin önüne id / div id / class bölümü kullanabilirsiniz img. Bu özel img-responsiveyalnızca bu alanda çalışır.
Diyelim ki şu şekilde tanımlanmış bir HTML alanınız var:
<section id="work">
<div class="container">
<div class="row">
<img class="img-responsive" src="some_image.jpg">
</div>
</div>
</section>Ardından, CSS'niz şunlar olabilir:
section#work .img-responsive{
margin: 0 auto;
}Not: Bu cevap, img-responsivebir bütün olarak değiştirmenin potansiyel etkisi ile ilgilidir . Tabii ki, center-blocken basit çözüm.
Bu blok deneyin bootstrap 4 ile küçük simgeler için de çalışacaktır çünkü hiçbir center-block sınıfı bootstrap 4 olduğundan, bu yöntemi deneyin yararlı olacaktır. Sen ayarlayarak görüntünün konumunu değiştirebilirsiniz .col-md-12için .col-md-8ya .col-md-4da sen kadar var.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-xs-center text-lg-center">
<img src="" class="img-thumbnail">
</div>
</div>
</div>
</div>Bunu dene:
.img-responsive{
display: block;
height: auto;
max-width: 100%;
margin:0 auto;
}
.Image{
background:#ccc;
padding:30px;
}<div class="Image">
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>Tüm görüntü küçük resimlerini aşağıdaki gibi bir satır / col div öğesine yerleştirin:
<div class="row text-center">
<div class="col-12">
# your images here...
</div>
</div>ve her şey yoluna girecek!
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>.
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>Kenar boşluğunu tanımlayarak düzeltebilirsiniz: 0 otomatik
veya col-md-offset'i de kullanabilirsiniz
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>
<div class="container">
<h2>Image</h2>
<div class="row">
<div class="col-md-12">
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</div>
</div>
</body>
</html>Yalnızca standart sınıfları kullanan tüm Booostrap nesnelerine uygulanan daha kesin yol, üst ve alt kenar boşluklarını (görüntü üst öğeden bu öğeleri devralabilir gibi) ayarlamak değil, bu yüzden her zaman kullanıyorum:
.text-center .img-responsive {
margin-left: auto;
margin-right: auto;
}Bunun için bir Gist yaptım, bu nedenle herhangi bir hata nedeniyle herhangi bir değişiklik uygulanacaksa, güncelleme sürümü her zaman burada olacaktır: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66
Şimdiye kadar kabul etmek için en iyi çözüm gibi görünüyor <img class="center-block" ... />. Ama kimse nasıl center-blockçalıştığını söylemedi.
Örneğin Bootstrap v3.3.6'yı alın:
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}Varsayılan değeri dispalyiçin <img>ise inline. Değer block, bir öğeyi bir blok öğesi (gibi <p>) olarak görüntüler. Yeni bir satırda başlar ve tüm genişliği kaplar. Bu şekilde, iki kenar boşluğu ayarı görüntünün yatay olarak ortada kalmasını sağlar.
:)