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

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?

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

Bunu yapmanın doğru yolu

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

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

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

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

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;
}

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

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

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

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>

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;
}

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

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

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.

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;
        }
}

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>

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;
}

Ö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.