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

html css

— Mike
kaynak

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

— Clairesuzy
kaynak

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>

Snippet'i genişlet

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.

— Jan Derk
kaynak

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>

— Lauw
kaynak

9

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

.wrapper {

display: table;
margin: auto;

}

— iyi pikseller
kaynak

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>

— Shaq
kaynak

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

— Teoman Shipahi
kaynak