Bagaimana cara menyelaraskan div saya secara horizontal?


118

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?


Jawaban:



62

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)


15

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>


Ini adalah cara yang bagus untuk menyelaraskan div! Dan ya ... penyelarasan di CSS telah menjadi mimpi buruk terlalu lama!
Michael Kniskern

11

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


8

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/


8

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

4

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.


2

Saya mencoba jawaban yang diterima, tetapi akhirnya menemukan bahwa:

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

Bekerja dengan baik sejauh ini.


1

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.