Bir görüntü ölü merkezini bootstrap ile hizalama


207

Bootstrap çerçevesini kullanıyorum ve başarı olmadan yatay olarak ortalanmış bir görüntü elde etmeye çalışıyorum.

12 ızgara sistemini 3 eşit blokta bölmek gibi çeşitli teknikleri denedim.

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

Görüntüyü sayfaya göre ortalamak için en kolay yöntem nedir?


Ve btw. "Sütunları kaydırma" bölümüne göz atmak isteyebilirsiniz. twitter.github.com/bootstrap/scaffolding.html#gridSystem
mind85

Birisi bunu bir cevap değil olarak işaretledi ve katılıyorum. Lütfen bunu yorum olarak ekleyin; yanıtınız kısa süre içinde silinecek.
tckmn

1
Etiketinizde img-responsivesınıf varsa img, görüntü ortalanmayabilir. Bootstrapsınıfınıkullanmanınbu sorunu bootstrap yolununedençözeceğine dairbir açıklama için bu SO cevabına bakıncenter-block.
cssyphus

Bootstrap kullanıyorsanız, bunu yapabilirsiniz: stackoverflow.com/a/59469712/4654957
Diego Venâncio

Yanıtlar:


271

Twitter Bootstrap v3.0.3 bir sınıfa sahiptir: center-block

İçerik bloklarını ortala

Görüntülenecek öğeyi ayarlayın: kenar boşluğu ile bloklayın ve ortalayın. Mixin ve sınıf olarak mevcuttur.

Sadece bir sınıf eklemeniz gerekir .center-blockde imgböyle, etiketi görünüyor

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div>

Bootstrap zaten css tarzı çağrı var .center-block

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

Buradan bir örnek görebilirsiniz


1
div'deki kapanış </div>etiketi containereksik görünüyor. bu benim için v3.3.7 üzerinde çalışmaz
tarabyte

141

Bunu yapmanın doğru yolu

<div class="row text-center">
  <img ...>
</div>

25
Benim için bunu yapan değil iş bu onu kullanırken - startbootstrap.com/round-about .. ama bir sınıf ekleyerek center-blockiçin <img>elementlerin .. çalıştı
Sumeet Pareek

3
metin merkezi img duyarlı sınıflı görüntüler üzerinde çalışmaz, ancak yukarıdaki yorum (orta blok hakkında) bu sorunu çözer
truva atı

Bir gözlem: Bootstrap v3.1.0'da, sütuna img-duyarlı yanıtını sütuna metin merkezi ekleyerek ortalamak mümkündür. Bu davranış, v3.3.4'te bozuk. Çok sinir bozucu. Css berbat.
f470071

bunun yerine dokümanlarda belirtildiği gibi center-block kullanmalısınız: getbootstrap.com/css/#images-responsive
Nacho

95

2018 Güncellemesi

center-blockSınıf artık var Bootstrap 4 . Bir görüntüyü Bootstrap 4'te ortalamak için mx-auto d-block...

<img src="..." class="mx-auto d-block"/>

6
'Güncelleme 2018'e biraz açıklama eklemek için: mx-auto sol ve sağ kenar boşluklarını otomatik olarak ayarlar; d-blok setleri görüntüler: blok
Michael Moriarty

85

Resme sınıf olarak 'center-block' ekleyin - ek css gerekmez

<img src="images/default.jpg" class="center-block img-responsive"/>

8
-1 - BU NEDEN EN İYİ CEVAP İLE emin değilim! Bootstrap içine inşa yardımcı sınıfı kullanır.
user2562923

4
Bootstrap 4'te, mx-autoyerine kullanıncenter-block
Quantum7

52

Twitter bootstrap merkezleyen bir sınıfa sahiptir: .pagination-centered

Benim için çalıştı:

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

Sınıf için css:

.pagination-centered {
  text-align: center;
}

18
Ya da belki .text-centersınıf?
trejder

36

Aşağıdakileri kullanabilirsiniz. Yukarıdaki Bootstrap 3.x'i destekler.

<img src="..." alt="..." class="img-responsive center-block" />

Bunun için teşekkürler. Tam bugün ihtiyacım olan şey.
Ryan Wilson

28

Resminin yanında başka bir şey yok olduğunu varsayarsak, en iyi yolu kullanımda etmektir text-align: centeriçinde imgebeveyn:

.row .span4 {
    text-align: center;
}

Düzenle

Diğer yanıtlarda belirtildiği gibi, bootstrap CSS sınıfını .text-centerüst öğeye ekleyebilirsiniz . Bu tam olarak aynı şeyi yapar ve her iki mevcuttur v2.3.3 ve v3


Mükemmel - Bu işi yapar. Ama resmin altında bir <ul> elemanım olduğunu varsayalım ... Bu, merkezi beklendiği gibi hizalamıyor, ekleyebileceğim bir şey var mı? Teşekkürler
Fixer

1
Twitter bootstrap çekirdek sınıflardan birinde .row beri. Sınıf masthead ile twitter.github.com/bootstrap/index.html bu sayfada olduğu gibi yeni bir sınıf tanımlamanızı tavsiye ederim .
vaftiz

1
@Fixer <ul>Hala merkezi hizalamalıdır: jsfiddle.net/N74N7/1 Onu etkileyen başka bir CSS kodu olmalı
Kafam

2 veya 3 saatten fazla zaman geçirdim ve sadece bu hat ... teşekkürler!
alamin

18

Benim için çalışıyor. kullanmayı denecenter-block

<div class="container row text-center">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img class="center-block" src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

6

Aynı ihtiyacım var ve burada çözümü buldum:

https://stackoverflow.com/a/15084576/1140407

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

ve CSS'ye:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

Bence bootstrap insanlar css eklemek gerekir
Muhammed Ahsan

Merhaba, teşekkürler! Şimdi Bootstrap v3 kullanıyorum. Bu benim img konteyner div ekledi, bu yüzden işlerimi yapmak için benim div için tam genişliği (en azından) belirtmek zorunda kaldı. Kapsayıcı veya değişen resim boyutlarınız yoksa, bu sınıfı resminize ekleyin.
İnan

1

Margin özelliğini bootstrap img sınıfıyla kullanabilirsiniz.

.name-of-class .img-responsive { margin: 0 auto; }

1

Tarayıcı sürümü bir sorun değilse yeni bir HTML5 özelliği kullanabileceğimizi düşünüyoruz:

HTML dosyalarında:

<div class="centerBloc">
  I will be in the center
</div>

Ve CSS dosyasında şunu yazıyoruz:

body .centerBloc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Ve böylece div tarayıcıda mükemmel bir şekilde ortalanabilir.


3
Div'inizin sınıfı .centerBloc olarak adlandırılır ve css dosyanızın body.loadingDiv ...
Martin

Düzeltildi @Martin
dtechplus

0

Kullanmalısın

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>

.fluid-img {
    margin: 60px auto;
}

@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}

0

justify-content-centerBir kap içinde bir satır için sınıf kullanıyorum . Bootstrap 4 ile iyi çalışır.

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>

0

Bunu oluşturdum ve Site.css dosyasına ekledim.

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

-3

Önceki çözümün CSS'sini aşağıdaki gibi değiştirebilirsiniz:

.container, .row { text-align: center; }

Bu, üst öğedeki tüm öğeleri divde ortalamalıdır.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.