Tampilan pusat CSS inline blok?

Saya memiliki kode yang berfungsi di sini: http://jsfiddle.net/WVm5d/ (Anda mungkin perlu membuat jendela hasil lebih besar untuk melihat efek align center)

Pertanyaan

Kode berfungsi dengan baik tetapi saya tidak suka memilikinya display: table;. Ini satu-satunya cara saya bisa membuat pusat menyelaraskan kelas bungkus. Saya pikir akan lebih baik jika ada cara untuk menggunakan display: block;atau display: inline-block;. Apakah mungkin menyelesaikan pusat penyelarasan dengan cara lain?

Menambahkan fix dengan ke wadah bukan pilihan bagi saya.

Saya juga akan menempelkan kode saya di sini jika tautan JS Fiddle rusak di masa mendatang:

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}

<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>

Solusi yang diterima tidak akan bekerja untuk saya karena saya membutuhkan elemen anak dengan display: inline-blockmenjadi baik secara horizontal dan vertikal berpusat di dalam induk 100% lebar.

Saya menggunakan Flexbox justify-contentdan align-itemsproperti, yang masing-masing memungkinkan Anda untuk memusatkan elemen secara horizontal dan vertikal. Dengan mengatur keduanya centerpada induk, elemen anak (atau bahkan beberapa elemen!) Akan sempurna di tengah.

Solusi ini tidak memerlukan lebar tetap, yang tidak cocok untuk saya karena teks tombol saya akan berubah.

Berikut ini adalah demo CodePen dan cuplikan kode yang relevan di bawah ini:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  display: inline-block;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

Coba ini. Saya menambahkan text-align: centerke tubuh dan display:inline-blockuntuk membungkus, dan kemudian dihapusdisplay: table

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

Jika Anda memiliki <div>with text-align:center;, maka teks di dalamnya akan dipusatkan berkenaan dengan lebar elemen kontainer itu. inline-blockelemen diperlakukan sebagai teks untuk tujuan ini, sehingga mereka juga akan terpusat.

Anda juga dapat melakukan ini dengan memposisikan, mengatur div induk ke relatif dan div anak ke absolut.

.wrapper {
      position: relative;
  }
.childDiv {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }

Anda tidak perlu menggunakan "display: table". Alasan margin Anda: 0 upaya pemusatan otomatis tidak berfungsi karena Anda tidak menentukan lebar.

Ini akan bekerja dengan baik:

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it's the container;
}

Anda tidak perlu menentukan tampilan: blok karena div itu akan diblokir secara default. Anda mungkin juga bisa kehilangan kelebihan: tersembunyi.

Mirip dengan jawaban @ vijayscode, ini akan memusatkan elemen blok-inline secara horizontal (tetapi juga tanpa perlu memodifikasi gaya induknya):

  display: inline-block;
  position: relative;
  left: 50%; // Move the element to the left by 50% of the container's width
  transform: translateX(-50%); // Calculates 50% of the element's width and moves it by that amount across the X-axis to the left

Saya baru saja mengubah 2 parameter:

.wrap {
    display: block;
    width:661px;
}

Demo Langsung

Artikel hebat yang saya temukan yang paling berhasil bagi saya adalah menambahkan% ke ukuran

.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}

Cukup gunakan:

line-height:50px

Ganti "50px" dengan tinggi yang sama dengan div Anda.