Bootstrap: Sütunun içindeki içeriği hizalamak nasıl sıralanır?

Question

Basit kullanım durumu senaryosu, bir görüntü veya bir Bootstrap sütununun içindeki herhangi bir içeriğin kullanılmasıdır. Ve çoğu zaman bu içeriğin yatay olarak merkezlenmesi gerekiyor.

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-4 col-md-4 col-lg-4 text-center"> 
      <img class="img-responsive" src="img/some-image.png" title="this image needs to be centered"> 
     </div> 
     <div class="col-sm-8 col-md-8 col-lg-8"> 
      some content not important at this moment 
     </div> 
    </div> 
</div> 

3.1.0 sürümünde sınıf metin merkezi ekleme sütun içinde görüntüyü ortaladı. Ama diğer bazı sorunları düzeltmek için 3.3.4 sürümüne gitmeye zorlandım ve bu davranış (metin merkezi) artık bozuldu. Bir görüntüyü veya bir sütunun içindeki diğer içeriği nasıl ortalayacağım sorunuyla uğraşıyorum. Bu hataya eğilimli olan veya başka bir içeren div gerektirdiğinden, içerilen öğelere sınıf eklemekten kaçınmak istiyorum.

Answer 1

bir görüntü ortalamak ister misiniz? Çok kolay, Bootstrap iki sınıf, .center-block ve text-center ile birlikte gelir.

Kullanım görüntü, örneğin, bir BLOCK eleman olmak senin img img duyarlı sınıf ekleyerek durumunda eski img bir blok elemanı yapar. Web konsolunda gezinmeyi ve uygulanan stilleri bir öğeye nasıl uygulayacağınızı biliyorsanız bunu bilmelisiniz.

Sınıf kullanmak istemiyor musunuz? Sorun değil, burada CSS bootstrap kullanıyor. Özel bir sınıf oluşturabilir veya Önyükleme sınıfı ile eşleşecek öğe için bir CSS kuralı yazabilirsiniz.

// In case you're dealing with a block element apply this to the element itself 
.center-block { 
    margin-left:auto; 
    margin-right:auto; 
    display:block; 
} 

// In case you're dealing with a inline element apply this to the parent 
.text-center { 
    text-align:center 
} 

Answer 2

Bunu bir div i.e. centerBlock ekleyerek yapabilirsiniz. Görüntüyü veya herhangi bir içeriği ortalamak için CSS'de bu özelliği verin. İşte kod:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-4 col-md-4 col-lg-4"> 
      <div class="centerBlock"> 
       <img class="img-responsive" src="img/some-image.png" title="This image needs to be centered"> 
      </div> 
     </div> 
     <div class="col-sm-8 col-md-8 col-lg-8"> 
      Some content not important at this moment 
     </div> 
    </div> 
</div> 


// CSS 

.centerBlock { 
    display: table; 
    margin: auto; 
}