Trick: pusat div kedudukan mutlak

Carlos Sánchez

Minit 1

Dalam CSS kadang-kadang kita menyukarkan hidup kita dengan perkara-perkara sederhana yang kurang rumit daripada yang kita fikirkan, dan apabila kita melihat jalan keluarnya, kita hampir ketawa melihat anekdot tersebut.

Lebih daripada satu orang telah bertanya kepada saya bagaimana untuk memusatkan kedudukan div yang betul-betul berada, dan jawapannya sangat mudah:

  1. Kami memberi div lebar yang tetap. Contoh: 500px
  2. Kami meletakkan div dengan 50% lagi. Contoh: kedudukan: mutlak; kiri: 50%;
  3. Kami tolak separuh daripada ukurannya dengan margin. Contoh: margin-kiri: -250px;

Hasilnya adalah div yang betul-betul berpusat, betul-betul diposisikan.


Tinggalkan komen anda

Alamat email anda tidak akan disiarkan. Ruangan yang diperlukan ditanda dengan *

*

*

  1. Bertanggungjawab atas data: Miguel Ángel Gatón
  2. Tujuan data: Mengendalikan SPAM, pengurusan komen.
  3. Perundangan: Persetujuan anda
  4. Komunikasi data: Data tidak akan disampaikan kepada pihak ketiga kecuali dengan kewajiban hukum.
  5. Penyimpanan data: Pangkalan data yang dihoskan oleh Occentus Networks (EU)
  6. Hak: Pada bila-bila masa anda boleh menghadkan, memulihkan dan menghapus maklumat anda.

  1.   Ivan Lira kata
    membuat 13 tahun

    Terima kasih banyak .. kerana anda mengatakan sesuatu yang sangat sederhana dan bahawa walaupun berlalunya masa masih menjadi pengarang banyak sakit kepala.
    Catatan anda sangat berguna untuk saya, terima kasih banyak.

    Balas Iván Lira
  2.   tongkol kata
    membuat 13 tahun

    Terima kasih banyak - banyak !!!

    Balas tongkol
  3.   glbroman kata
    membuat 12 tahun

    Sumbangan yang baik banyak membantu saya, terima kasih

    Balas Glbroman
  4.   LUCASG kata
    membuat 12 tahun

    Betapa hebatnya dia melayani saya: D

    Balas LUCASG
  5.   pemenang kata
    membuat 11 tahun

    Terima kasih ...

    Balas kepada pemenang
  6.   anak yg paling dicintai kata
    membuat 11 tahun

    Carlos sangat baik.

    Balas benjamin
  7.   Gambar placeholder Mario Lozano kata
    membuat 11 tahun

    maklumat yang sangat baik

    Balas Mario Lozano
  8.   Frank Koq kata
    membuat 11 tahun

    Terima kasih, ia melayani saya

    Balas Frank Koq
  9.   marc kata
    membuat 10 tahun

    Awak selamatkan saya!!! Terima kasih :)

    Balas marc
  10.   Danielfloyd kata
    membuat 10 tahun

    Terima kasih pakcik, anda banyak membantu saya !!, kekurangan khayalan saya.

    Balas DanielFloyd
  11.   Damian kata
    membuat 9 tahun

    terima kasih banyak - banyak !!!!! muslihat ini selalu menolong saya haha

    Balas kepada damian
  12.   o kata
    membuat 9 tahun

    terima kasih banyak kawan yang sangat baik

    Balas ke atau
  13.   Chrismart Anji kata
    membuat 8 tahun

    Ini tidak berpusat, semuanya bergantung pada ukuran asal elemen div asas yang menjadikannya tumbuh bergantung pada apa yang dimasukkan ke dalam, bagi saya lebih berguna untuk menggunakan ini daripada secara visual jika saya melihatnya lebih berpusat dan responsif :

    mutlak;
    kiri: 50%;
    margin-kiri: -100 piksel;

    itu akan menjadi separuh.

    Balas Chrismart Anji
  14.   Edgar cjuno kata
    membuat 7 tahun

    Sumbangan dihargai, ia sangat membantu saya, salam!

    Balas Edgar Cjuno
  15.   Miriam Jess kata
    membuat 6 tahun

    Sumbangan yang sangat baik banyak membantu saya, seribu rahmat!

    Balas Miriam Jess