Div'lerimi nasıl yatay olarak hizalayabilirim?

Bazı nedenlerden dolayı, div'lerim içeren bir div'de yatay olarak ortalanmıyor:

.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  float: left;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

Ve bazen içinde sadece bir blok div olan bir satır div vardır. Neyi yanlış yapıyorum?

Yapmaya çalıştığınız şeyi başarmak için:

display: inline-blockBunun yerine kullanmayı düşünün float.

Bunu dene:

.row {
  width: 100%;
  text-align: center; // center the content of the container
}

.block {
  width: 100px;
  display: inline-block; // display inline with ability to provide width/height
}​

DEMO

• sahip margin: 0 auto;ile birlikte width: 100%size eleman tam boşluk alacak çünkü işe yaramaz.

• float: lefthiç boşluk kalmayıncaya kadar elemanları sola yüzdürür, böylece yeni bir çizgiye giderler. display: inline-blockÖğeleri satır içi olarak görüntüleyebilmek için kullanın , ancak boyut sağlama yeteneği ile ( display: inlinegenişlik / yüksekliğin göz ardı edildiği yerlerin aksine )

CSS'deki hizalamalar tam bir kabustu. Neyse ki, 2009'da W3C tarafından yeni bir standart tanıtıldı: Esnek Kutu . Burada bununla ilgili iyi bir öğretici var . Şahsen ben bunu diğer yöntemlerden çok daha mantıklı ve anlaşılması daha kolay buluyorum.

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.block {
  width: 100px;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

FlexBox kullanarak:

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

.row {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* for centering 3 blocks in the center */
  /* justify-content: space-between; for space in between */ 
}
.block {
  width: 100px;
}

En son trend, Float kullanmak yerine Flex veya CSS Grid kullanmaktır. Ancak yine de bazı% 1 tarayıcılar Flex'i desteklemiyor. Ama yine de eski IE kullanıcıları kimin umurunda;)

Keman: Burayı Kontrol Edin

Başka bir çalışma örneği , display: inline-blockve kullanaraktext-align: center

HTML :

<div class='container'>
    <div class='row'>
        <div class='btn'>Hello</div>
        <div class='btn'>World</div>
    </div>
    <div class='clear'></div>
</div>

CSS :

.container {
    ...
}
.row {
    text-align: center;
}
.btn {
    display: inline-block;
    margin-right: 6px;
    background-color: #EEE;
}
.clear {
    clear: both;
}

Fiddle: http://jsfiddle.net/fNvgS/

Bu soruyu ele almasa da (çünkü s'leri <div>kapsayıcı içinde hizalamak istiyorsun ) ama doğrudan ilgili: sadece bir div'i yatay olarak hizalamak istiyorsan, şunu yapabilirsin:

#MyDIV
{
    display: table;
    margin: 0 auto;
}

Öğeler tek satırda gösterilecekse ve IE 6/7 önemli değilse, yerine display: tableve display: table-cellkullanmayı düşünün float.

inline-blockelemanlar arasında yatay boşluklara yol açar ve bu boşlukların sıfırlanmasını gerektirir. En basit yol, font-size: 0ana öğe için ayarlamak ve ardından a veya değerine ayarlayarak font-sizesahip olan alt öğeler için geri yüklemektir .display: inline-blockfont-sizepxrem

Kabul edilen cevabı denedim ama sonunda şunu buldum:

margin: 0 auto;
width: anything less than 100%;

Şimdiye kadar iyi çalışıyor.

Yatay div hizalamasını halletmem gerektiğinde bu iki yaklaşımı kullanıyorum.
ilk ( Kenar Boşluğu Özelliğini Kullanarak Ortaya Hizalama ):

.center-horizontal-align {
    margin-left: auto;
    margin-right: auto;
    width: (less than 100%) or in px
}

Sol ve sağ kenar boşluklarının otomatik olarak ayarlanması, mevcut kenar boşluğunu eşit olarak bölmeleri gerektiğini belirtir. Genişlik% 100 ise ortaya hizalamanın hiçbir etkisi yoktur.

ve ikinci:

.center-horizontal-align {
    display: table
    margin-left: auto;
    margin-right: auto;
}

İkinci yaklaşımı kullanmak, birkaç öğeniz olduğunda ve hepsinin tek bir tablo hücresinde ortalanmasını istiyorsanız (yani, bir hücrede birkaç düğme) uygundur.