Bagaimana cara memusatkan elemen melayang?

355

Saya menerapkan pagination, dan perlu dipusatkan. Masalahnya adalah bahwa tautan harus ditampilkan sebagai blok, sehingga tautan tersebut harus diapungkan. Tapi kemudian, text-align: center;tidak berhasil. Saya dapat mencapainya dengan memberikan lapisan pembungkus kiri, tetapi setiap halaman akan memiliki jumlah halaman yang berbeda, sehingga tidak akan berfungsi. Ini kode saya:

.pagination {
  text-align: center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
Luaskan cuplikan

Untuk mendapatkan ide, apa yang saya inginkan:

teks alternatif

css-float  center  css 
— Mike
sumber
Seluruh tujuan properti pelampung adalah untuk memposisikan elemen di sepanjang sisi kiri atau kanan wadahnya.
— Rob
3
@ Rob: Ya, saya perlu mendefinisikan lebar dan tinggi untuk elemen tautan, yang hanya bisa dilakukan pada elemen blok, tetapi ketika Anda membuat blok tautan, masing-masing menyebar pada baris baru, itulah sebabnya saya membuatnya melayang.
— Mike
Solusi alternatif, ketika Anda tidak ingin / tidak bisa menggunakan inline-block. stackoverflow.com/questions/1232096/…
— hakunin
1
Saya percaya pertanyaan ini patut mendapat perhatian moderator karena judul dan jawaban saat ini menyesatkan. Pertanyaannya bukan tentang konten mengambang di tengah, tetapi tentang konten keterpusatan. Mengambang berarti konten saudara non-mengambang harus mengisi celah yang tersisa dan itu jelas tidak diinginkan atau dicapai di sini.
— tao
8
@AndreiGheorghiu jika Anda berpikir begitu, sarankan edit daripada menandai untuk mod. Siapa pun dapat mengedit pertanyaan ini, jadi edit pertanyaan dan tulis penjelasan terperinci dengan alasan edit. Ini adalah sesuatu yang bisa dilakukan pengguna, tidak harus menjadi moderator. Tidak ada yang salah dengan pertanyaan atau jawaban apa pun yang memerlukan intervensi moderator
— Zoe

Jawaban:

406

Menghapus floats, dan menggunakan inline-blockdapat memperbaiki masalah Anda:

 .pagination a {
-    display: block;
+    display: inline-block;
     width: 30px;
     height: 30px;
-    float: left;
     margin-left: 3px;
     background: url(/images/structure/pagination-button.png);
 }

(hapus garis yang dimulai dengan -dan tambahkan garis yang dimulai dengan +.)

Tampilkan cuplikan kode

inline-block berfungsi lintas-browser, bahkan pada IE6 selama elemen tersebut awalnya merupakan elemen inline.

Kutipan dari quirksmode :

Blok inline ditempatkan inline (mis. Pada baris yang sama dengan konten yang berdekatan), tetapi berperilaku sebagai blok.

ini sering dapat secara efektif menggantikan pelampung:

Penggunaan sebenarnya dari nilai ini adalah ketika Anda ingin memberikan elemen inline lebar. Dalam beberapa keadaan beberapa browser tidak mengizinkan lebar pada elemen inline nyata, tetapi jika Anda beralih ke tampilan: inline-block Anda diizinkan untuk mengatur lebar. " ( http://www.quirksmode.org/css/display.html#inlineblock ).

Dari spec W3C :

[inline-block] menyebabkan elemen untuk menghasilkan kontainer blok inline-level. Bagian dalam blok inline diformat sebagai kotak blok, dan elemen itu sendiri diformat sebagai kotak level inline atom.

— Arnaud Le Blanc
sumber
10
Kiat: Jangan lupakan perataan vertikal.
— Synexis
5
Ya, ini adalah salah satu dari sedikit kasus yang saya temukan di mana vertical-align benar-benar melakukan apa yang Anda harapkan.
— Mike Turley
4
Kelemahan dari metode ini adalah sulitnya mengontrol jarak horizontal, karena spasi putih mungkin muncul di antara elemen-elemen.
— Xavier Poinas
@XavierPoinas: gunakan ukuran font: 0; pada orang tua untuk memperbaiki masalah itu
— roelleor
Perlu diingat bahwa "font-size: 0" yang digunakan tidak bekerja pada perangkat Android. Tidak yakin apakah ini masih berlaku untuk versi terbaru.
— Andreas Baumgart
150

Sejak bertahun-tahun saya menggunakan trik lama yang saya pelajari di beberapa blog, saya minta maaf saya tidak ingat nama untuk memberinya kredit.

Pokoknya untuk memusatkan elemen apung ini harus berfungsi:

Anda memerlukan struktur seperti ini:

    .main-container {
      float: left;
      position: relative;
      left: 50%;
    }
    .fixer-container {
      float: left;
      position: relative;
      left: -50%;
    }
<div class="main-container">
  <div class="fixer-container">
    <ul class="list-of-floating-elements">

      <li class="floated">Floated element</li>
      <li class="floated">Floated element</li>
      <li class="floated">Floated element</li>

    </ul>
  </div>
</div>
Luaskan cuplikan

Caranya adalah dengan mengapung ke kiri untuk membuat wadah mengubah lebar tergantung pada konten. Than adalah masalah posisi: relatif dan meninggalkan 50% dan -50% pada dua wadah.

Hal yang baik adalah bahwa ini adalah browser silang dan harus bekerja dari IE7 +.

— lukart
sumber
1
Pengingat bahwa ini berfungsi jika hanya ada 1 elemen float tunggal.
— Wtower
Masalahnya adalah bilah gulir horizontal akan muncul karena bagian luar meluas melewati layar. Juga ketika daftar membungkus ke baris lain maka semuanya pergi ke kiri rata.
— cleversprocket
Ini tidak akan membuat perbedaan tanpa mengatur lebar maksimal wadah, margin: 0 auto;melakukan pekerjaan yang lebih baik dalam kasus ini
— Murhaf Sousli
1
Bagi saya, float: left;itu tidak perlu .main-containerdan .fixer-container.
— csum
@cleversprocket Saya memecahkan gulir horizontal dengan membungkus semuanya dalam satu div denganoverflow: hidden;
— csum
36

Mengapung centering itu mudah . Cukup gunakan gaya untuk wadah:

.pagination{ display: table; margin: 0 auto; }

ubah margin untuk elemen apung:

.pagination a{ margin: 0 2px; }

atau

.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; }

dan biarkan sisanya apa adanya.

Ini solusi terbaik bagi saya untuk menampilkan hal-hal seperti menu atau pagination.

Kekuatan:

  • lintas browser untuk elemen apa pun (blok, daftar-item, dll.)

  • kesederhanaan

Kelemahan:

  • ini hanya berfungsi ketika semua elemen mengambang berada dalam satu baris (yang biasanya ok untuk menu tetapi tidak untuk galeri).

@ arnaud576875 Menggunakan inline-block elemen akan bekerja dengan baik (lintas-browser) dalam hal ini karena pagination hanya berisi anchor (inline), tidak ada daftar-item atau div:

Kekuatan:

  • berfungsi untuk item multiline.

Weknesses:

  • kesenjangan antara elemen inline-blok - ia bekerja dengan cara yang sama seperti spasi di antara kata-kata. Ini dapat menyebabkan beberapa masalah menghitung lebar wadah dan margin gaya. Lebar celah tidak konstan tetapi khusus browser (4-5px). Untuk menghilangkan celah ini saya akan menambahkan kode arnaud576875 (tidak sepenuhnya diuji):

    .pagination {spasi-kata: -1em; }

    .pagination a {spasi-kata: .1em; }

  • itu tidak akan berfungsi di IE6 / 7 pada elemen blok dan daftar-item

— romprzy
sumber
display: trik meja tidak bisa dipercaya hanya melakukan segalanya sebagaimana mestinya hanya dengan beberapa baris. Saya perlu mengingatnya. Cheers
— kilop
Teknik inline-block bekerja sangat baik. Untungnya, elemen yang saya gunakan (bersarang elemen div) ini untuk dapat menangani kesenjangan dengan baik.
— karolus
Anda juga dapat menghapus celah inline-blok dengan menjatuhkan ukuran font ke nol, lalu mengembalikan ke nilai Anda sebelumnya di dalam elemen turunan
— Mike Causer
15

Mengatur kontainer Anda widthdi pxdan menambahkan:

margin: 0 auto;

Referensi .

— Barney
sumber
1
bagi saya, ini adalah jawaban terbaik: P.
— alansiqueira27
3
Ini hanya akan berfungsi jika lebar kontainer sesuai, yang merupakan masalah ketika mengandung elemen melayang.
— Wtower
11

Menggunakan Flex

.pagination {
  text-align: center;
  display:flex;
  justify-content:center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
Luaskan cuplikan

— Santosh Khalse
sumber
5

Saya pikir cara terbaik menggunakan marginbukan display.

Yaitu:

.pagination a {
    margin-left: auto;
    margin-right: auto;
    width: 30px;
    height: 30px;    
    background: url(/images/structure/pagination-button.png);
}

Periksa hasil dan kode:

http://cssdeck.com/labs/d9d6ydif

— Tarod
sumber
1
Bekerja hanya dengan margin: otomatis; bukannya sifat kiri & kanan individual juga.
— cellepo
2

IE7 tidak tahu inline-block. Anda harus menambahkan:

display:inline;
zoom: 1;
— Seni Krisada
sumber
1

Tambahkan ini ke gaya kamu

position:relative;
float: left;
left: calc(50% - *half your container length here);

* Jika lebar kontainer Anda adalah 50px, masukkan 25px, jika 10em, masukkan 5em.

— 11-
sumber
1

Anda juga dapat melakukan ini dengan mengubah .paginationdengan mengganti "text-align: center" dengan dua hingga tiga baris css untuk kiri, mengubah dan, tergantung pada keadaan, posisi.

.pagination {
  left: 50%; /* left-align your element to center */
  transform: translateX(-50%); /* offset left by half the width of your element */
  position: absolute; /* use or dont' use depending on element parent */
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
Luaskan cuplikan

— mwag
sumber
0 
<!DOCTYPE html>
<html>
<head>
    <title>float object center</title>
    <style type="text/css">
#warp{
    width:500px;
    margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
    width: 120px;
    margin-left: 40px;
}

    </style>
</head>
<body>



<div id="warp">
            <div class="ser">
              <img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

              </div>
           <div class="ser">
             <img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

             </div>
        </div>

</body>
</html>

Langkah 1

buat dua atau lebih div yang Anda inginkan dan beri lebar yang pasti seperti 100px untuk masing-masing lalu apungkan ke kiri atau kanan

Langkah 2

lalu warp kedua div ini di div lain dan berikan lebar 200px. untuk div ini terapkan margin otomatis. booming itu bekerja dengan cukup baik. periksa contoh di atas.

-1

Hanya menambahkan

left:15%;

ke menu css saya dari 

#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}

melakukan trik pemusatan juga

— pengguna3085662
sumber
4
15% jelas sewenang-wenang.
— Wtower
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.