Şamandırayı hizalama: div'i merkeze mi?


99

Bir grup görüntünün sayfada yatay olarak görüntülenmesini istiyorum. Her görüntünün altında birkaç bağlantı var, bu yüzden her görüntü / bağlantı grubunun etrafına bir kap koymam gerekiyor.

İstediğim şeye en çok yaklaştığım şey onları float: left div'lere koymak. Sorun şu ki, kapların sola değil merkeze hizalanmasını istiyorum. Bunu nasıl başarabilirim.

Yanıtlar:


220

display:inline-block;float yerine kullanın

kayan sayıları ortalayamazsınız, ancak satır içi bloklar sanki metinmiş gibi ortalanır, bu nedenle "satırınızın" dış genel kapsayıcısında - text-align: center;o zaman her görüntü / resim yazısı kapsayıcısı için ayarlarsınız (olanlardır inline-block;) - gerekirse metni sola hizalayın


3
Herhangi birinin öğeler arasında görünen boşluklarla mücadele etmesi durumunda, '<img> </img> <img> </img>' veya '<img> <gibi öğelerinizi tanımlayarak kodunuzdaki boşlukları kaldırın. / img> <! - Yorum -> <img> </img> '.
Maarten

1
Veya ana öğeyi ayarlayın font-size:0ve onu alt öğe üzerinde geri yükleyin. Veya letter-spacing:-.31emebeveyn ve letter-spacing:0çocuk üzerinde kullanın .
Mike Causer

@Baumr Bunun yerine flexbox kullanın. Aşağıda bir örnek var .
Jan Derk

3
vertical-align:middlekullanırken eklemeniz gerekebilir display:inline-block.
ibsenv

47

CSS Flexbox bu günlerde iyi destekleniyor . Flexbox hakkında iyi bir eğitim için buraya gidin.

Bu, tüm yeni tarayıcılarda iyi çalışır:

#container {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

.block {
  width:              150px;
  height:             150px;
  background-color:   #cccccc;
  margin:             10px;        
}
<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>    
  <div class="block">4</div>    
  <div class="block">5</div>        
</div>

Bazıları neden display: inline-block kullanılmadığını sorabilir. Basit şeyler için sorun değil, ancak bloklar içinde karmaşık bir kodunuz varsa, düzen artık doğru bir şekilde ortalanamayabilir. Flexbox, soldaki float'tan daha kararlıdır.


Bu, yatay olarak ortalamak için çalışır. Dikey olarak da ortalamaya ne dersiniz?
Cullub

Dikey olarak ortalamak için konteynere bir yükseklik (örneğin, yükseklik: 500px;) verin ve hizalama öğeleri ekleyin: center;
Jan Derk

9

şöyle dene:

  <div id="divContainer">
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <br class="clear" />
    </div>

    <style type="text/css">
    #divContainer { margin: 0 auto; width: 800px; }
    .divImageHolder { float:left; }
    .clear { clear:both; }
    </style>

9

Sadece kayan öğeleri a içine sarın <div>ve bu CSS'yi verin:

.wrapper {

display: table;
margin: auto;

}

1

Belki de aradığınız şey - https://www.w3schools.com/css/css3_flexbox.asp

CSS:

#container {
  display:                 flex;
  flex-wrap:               wrap;
  justify-content:         center;
}

.block {
  width:              150px;
  height:             150px;
  margin:             10px;        
}

HTML:

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>          
</div>

0
.contentWrapper {
    float: left;
    clear: both;
    margin-left: 10%;
    margin-right: 10%;
}

.repeater {
    height: 9em;
    width: 9em;
    float: left;
    margin: 0.2em;
    position: relative;
    text-align: center;
    cursor: pointer;
}
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.