Bagaimana cara menyelaraskan div saya secara horizontal?

Untuk beberapa alasan div saya tidak akan terpusat secara horizontal di div yang berisi:

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

Dan terkadang ada div baris dengan hanya satu div blok di dalamnya. Apa yang saya lakukan salah?

Untuk mencapai apa yang Anda coba lakukan:

Pertimbangkan untuk menggunakan display: inline-blockdaripada float.

Coba ini:

.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

• memiliki margin: 0 auto;bersama dengan width: 100%sia-sia karena elemen Anda akan mengambil ruang penuh.

• float: leftakan mengapung elemen ke kiri, sampai tidak ada ruang tersisa, sehingga mereka akan pergi ke baris baru. Gunakan display: inline-blockuntuk dapat menampilkan elemen sebaris, tetapi dengan kemampuan untuk memberikan ukuran (berlawanan dengan display: inlinelebar / tinggi yang diabaikan)

Penjajaran di CSS telah menjadi mimpi buruk. Untungnya, standar baru diperkenalkan oleh W3C pada tahun 2009: Kotak Fleksibel . Ada tutorial bagus tentang itu di sini . Secara pribadi saya merasa jauh lebih logis dan lebih mudah dipahami daripada metode lain.

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

Menggunakan FlexBox:

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

Tren terbaru adalah menggunakan Flex atau CSS Grid daripada menggunakan Float. Namun, masih ada 1% browser yang tidak mendukung Flex. Tapi siapa yang benar-benar peduli dengan pengguna IE lama;)

Biola: Periksa Di Sini

Contoh kerja lainnya , menggunakan display: inline-blockdantext-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;
}

Biola: http://jsfiddle.net/fNvgS/

Meskipun tidak mencakup pertanyaan ini (karena Anda ingin menyelaraskan <div>s di dalam wadah) tetapi terkait langsung: jika Anda ingin menyelaraskan hanya satu div secara horizontal, Anda dapat melakukan ini:

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

Jika elemen akan ditampilkan dalam satu baris dan IE 6/7 tidak menjadi masalah, pertimbangkan untuk menggunakan display: tabledan display: table-cellsebagai gantinya float.

inline-blockmengarah ke celah horizontal antar elemen dan membutuhkan penekanan pada celah tersebut. Cara paling sederhana adalah mengatur font-size: 0elemen induk dan kemudian mengembalikan font-sizeelemen anak yang memiliki display: inline-blockdengan mengatur font-sizeke nilai pxatau rem.

Saya mencoba jawaban yang diterima, tetapi akhirnya menemukan bahwa:

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

Bekerja dengan baik sejauh ini.

Saya telah menggunakan dua pendekatan ini ketika saya perlu menangani penyelarasan div horizontal.
first ( Center Aligning Menggunakan Properti margin ):

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

Mengatur margin kiri dan kanan ke otomatis menentukan bahwa mereka harus membagi margin yang tersedia secara merata. Perataan tengah tidak berpengaruh jika lebarnya 100%.

dan yang kedua:

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

Menggunakan pendekatan kedua adalah nyaman ketika Anda memiliki beberapa elemen dan Anda ingin semuanya dipusatkan di satu sel tabel (yaitu beberapa tombol dalam satu sel).