Perataan elemen horizontal dan vertikal dalam CSS. Perataan vertikal CSS untuk semua orang

Saat membuat blok div, Anda mungkin menemukan situasi di mana Anda perlu memusatkan div Anda secara horizontal dan vertikal menggunakan CSS murni. Misalnya, saat membuat jendela sembulan dengan file . Ada beberapa cara untuk menerapkan pemusatan, dan dalam artikel ini saya akan membahas cara favorit dan termudah saya, menggunakan CSS atau jQuery.

Untuk memulai, dasar-dasarnya:

Pemusatan horizontal di CSS

Ini mudah dilakukan, kami menggunakan batas untuk kita div memblokir.

NamaKelas( margin:0 otomatis; lebar:200px; tinggi:200px;)

Untuk memusatkan blok div hanya secara horizontal, Anda perlu menentukan lebar blok (lebar), gunakan properti mobil untuk indentasi (margin) kiri dan kanan. Metode ini akan bekerja untuk semua elemen blok (div, p, h1, dll...). Untuk menerapkan pemusatan horizontal untuk elemen sebaris (tautan, gambar...), Anda perlu menerapkan opsi menampilkan:memblokir;

Pemusatan horizontal dan vertikal di CSS

Memusatkan blok div secara horizontal dan vertikal pada saat yang sama sedikit lebih sulit. Anda perlu mengetahui dimensi blok div sebelumnya.

ClassName( lebar:300px; tinggi:200px; posisi:absolut; kiri:50%; atas:50%; margin:-100px 0 0 -150px;)

Dengan menggunakan mutlak pemosisian blok, kita dapat melepaskannya dari elemen sekitarnya dan menentukan posisinya dalam kaitannya dengan ukuran jendela browser. Pindahkan blok div ke 50% kiri dan atas jendela. Sekarang sudut kiri atas blok berada di tengah jendela browser. Tetap mengatur blok div di tengah halaman dengan memindahkannya ke setengah dari lebarnya ke kiri dan setengah tingginya ke atas. Hore! Ternyata blok yang sangat baik berpusat pada kode css murni.

Pemusatan horizontal dan vertikal dengan jQuery

Seperti disebutkan sebelumnya, metode pemusatan CSS hanya berfungsi dengan ukuran tetap. Jika dimensi tidak ditentukan, metode jQuery akan datang untuk menyelamatkan:

$(window).resize(function()( $(".className").css(( posisi:"absolute", kiri: ($(window).width() - $(".className").outerWidth( ))/2, atas: ($(window).height() - $(".className").outerHeight())/2 )); )); // Untuk menjalankan fungsi saat jendela dimuat: $(window).resize();

Fungsi dari metode ini adalah untuk menjalankan fungsi resize(), menggunakan baris $(jendela).mengubah ukuran(). Fungsi ini berfungsi setiap kali jendela browser diubah ukurannya. Kita gunakan lebar luar() dan tinggi luar() karena, berbeda dengan lebar() dan tinggi(), mereka menyertakan padding dan ketebalan batas dalam ukuran yang mereka kembalikan. Baris terakhir memulai proses pemusatan div pada pemuatan halaman.

Keuntungan menggunakan metode ini adalah Anda tidak perlu tahu seberapa besar div tersebut. Kelemahan utama adalah hanya berfungsi ketika JavaScript diaktifkan. Oleh karena itu, metode ini dapat diterima untuk antarmuka multifungsi seperti Vkontakte, Facebook, dll.

Dalam proses tata letak halaman web, tugas pemusatan blok cukup umum. Ini bisa berupa pemusatan vertikal atau horizontal.

Misalnya, jika situs memiliki lebar tetap, maka akan rasional untuk menyelaraskannya ke tengah jendela browser, karena. ini membuat teks lebih mudah dibaca (terutama jika monitornya besar). Beberapa desain umumnya mengasumsikan bahwa blok terletak di tengah jendela browser, yaitu pemusatan vertikal dan horizontal.

Pertama, mari kita bicara tentang pemusatan horizontal. Teknik yang paling populer adalah ketika blok dipusatkan dengan mengatur ukuran kanan dan kiri margin ke "otomatis". Katakanlah kita ingin memusatkan blok dengan lebar id="container" 860px. Dalam hal ini, dalam file CSS Anda perlu menulis:

#wadah (
warna latar:#EEE;
lebar:860 piksel;
margin:0pxotomatis;
}

Namun, I.E. versi lama (5.0 misalnya) tidak akan memusatkan blok ini. Tentu saja, tidak ada yang menggunakan browser kuno seperti itu lagi (dari 1800 pengunjung harian saya - hanya 1), tetapi untuk berjaga-jaga, lebih baik membuatnya bekerja di sana juga :)

Untuk melakukan ini, elemen induk, yaitu yang di dalamnya kita memusatkan blok kita (biasanya elemen induk adalah tag BODY), Anda perlu mengatur parameter perataan teks: tengah. Dalam hal ini, blok akan sejajar dengan tengah, namun, semua isinya juga akan sejajar dengan tengah, dan kita tidak memerlukan ini. Oleh karena itu, di dalam blok ini kami mengatur perataan default - perataan teks: kiri .

badan (text-align:center)

#wadah (
warna latar:#EEE;
lebar:860 piksel;
margin:0pxotomatis;
perataan teks:kiri;
}

Ada juga cara lain untuk menyelaraskan blok secara horizontal berdasarkan . Seperti yang mungkin Anda ketahui, secara default, elemen blok apa pun terletak di tepi kiri elemen induk. Karena itu, untuk menyelaraskannya ke tengah, Anda perlu:

2. Pindahkan ke kanan sebesar 50% dari lebar jendela browser

3. Dengan menggunakan indentasi negatif, geser ke kiri dengan jarak yang sama dengan setengah lebar balok.

Dengan demikian, balok akan berada di tengah. Agar lebih jelas, tonton video di bawah ini:

Contoh kode CSS:

#wadah (
warna latar:#559964;
posisi: mutlak;
kiri:50%;
margin-kiri:-430px;
lebar:860 piksel;
}

Perlu dicatat bahwa jika Anda ingin memposisikan blok tidak relatif terhadap jendela browser, tetapi, misalnya, relatif terhadap blok lain, maka untuk blok lain ini Anda perlu mengatur posisi: relatif;

Katakanlah blok #container kita, yang perlu diluruskan ke tengah, berada di dalam blok #wrap. Maka kodenya akan terlihat seperti ini:

#bungkus(posisi:relatif)

#wadah (
warna latar:#559964;
posisi: mutlak;
kiri:50%;
margin-kiri:-430px;
lebar:860 piksel;
}

Sekarang mari kita pertimbangkan kasus ketika kita perlu menyelaraskan blok ke tengah halaman, mis. menerapkan pemusatan horizontal dan vertikal. Di sini sekali lagi kita menerapkan positioning. Jadi kita membutuhkan:

1. Atur blok ke posisi absolut

2. Pindahkan ke kanan sebesar 50% dan ke bawah sebesar 50%, sehingga menempatkan sudut kiri atas di tengah jendela browser.

3. Dengan menggunakan indentasi negatif, geser ke atas dengan jarak yang sama dengan setengah tinggi balok, dan ke kiri dengan jarak yang sama dengan setengah lebar balok.

Dengan demikian, blok akan berada di tengah halaman web.

Katakanlah blok kita memiliki tinggi 600px dan lebar 860px. Maka kode CSS akan terlihat seperti ini:

#wadah (
warna latar:#559964;
posisi: mutlak;
atas: 50%;
kiri:50%;
margin-atas:-300px;
margin-kiri:-430px;
tinggi: 600 piksel;
lebar:860 piksel;
}

Saya harap Anda mengerti prinsipnya.

Komentar:

Saya akan menjadi orang pertama yang menonton tutorialnya!

Eh... Yang kedua =) Saya baru-baru ini mengalami masalah ini di IE, saya menderita untuk waktu yang lama)) Terima kasih =)

Terima kasih, halaman yang di-bookmark

Terima kasih banyak, Andrey, untuk pelajaran barunya!

Terima kasih, saya pikir tidak ada yang perlu ditambahkan di sini))

Terima kasih atas pelajarannya, hanya beberapa hari yang lalu saya mencoba melakukan ini, sedikit menderita dan ditunda sementara

Dan saya punya masalah: situs di Mozille Firefox tidak ingin disejajarkan, macet di tepi kiri dan hanya itu, tidak ada yang membantu di atas (sama di Opera).

dan kenapa tidak berhasil? - "jika Anda ingin memposisikan blok tidak relatif terhadap jendela browser, tetapi, misalnya, relatif terhadap blok lain, Anda perlu mengatur posisi: relatif untuk blok lain ini;"

Terima kasih banyak!! terima kasih GIANT! Tuhan memberkati Anda!

Semuanya baik-baik saja, tetapi untuk beberapa alasan semua gambar masuk ke tempatnya hanya setelah memperbarui browser. Tolong beri tahu saya mengapa ini terjadi?

Andrey, silakan tambahkan pencarian di situs.

Tambahkan komentar.

Perataan Teks Secara Vertikal di CSS- pekerjaan yang sangat sulit. Saya telah melihat cukup banyak orang yang berjuang dengan ini dan saya terus menemukan bug "kritis" ketika datang ke desain responsif yang nyata.

Tapi jangan takut: jika Anda sudah berjuang dengan penyelarasan vertikal CSS, Anda telah datang ke tempat yang tepat.

Mari kita bicara tentang properti perataan vertikal CSS

Ketika saya pertama kali mulai bekerja di bidang pengembangan web, saya sedikit menderita dengan properti ini. Saya pikir itu akan berfungsi seperti properti klasik “ perataan teks". Ah, andai saja semudah itu...

Properti perataan vertikal CSS berfungsi dengan baik dengan tabel tetapi tidak dengan div atau elemen lainnya. Saat Anda menggunakannya pada div , itu menyelaraskan elemen dengan blok lain, tetapi bukan kontennya. Dalam hal ini, properti hanya berfungsi dengan display: inline-block; .

Lihat contoh

Kami ingin memusatkan konten, bukan div itu sendiri!

Anda memiliki dua pilihan. Jika Anda hanya memiliki div dengan teks, Anda dapat menggunakan properti line-height. Ini berarti Anda perlu mengetahui tinggi elemen, tetapi Anda tidak dapat mengaturnya. Dengan cara ini teks Anda akan selalu berada di tengah.

Kebenaran dari pendekatan ini Perataan vertikal CSS ada kekurangannya. Jika teks multiline, maka tinggi baris akan dikalikan dengan jumlah baris. Kemungkinan besar, dalam hal ini, Anda akan berakhir dengan halaman yang dirancang dengan sangat buruk.

Lihatlah contoh ini

Jika konten yang ingin Anda pusatkan lebih dari satu baris, lebih baik menggunakan tabel div. Anda juga dapat menggunakan tabel, tetapi ini tidak benar secara semantik. Jika Anda membutuhkan jeda untuk tujuan responsif, lebih baik menggunakan elemen div.

Agar ini berfungsi, harus ada wadah induk dengan display: table , dan di dalamnya, jumlah kolom yang diinginkan yang ingin Anda pusatkan dengan display: table-cell dan vertical-align: middle .

Lihat contoh

Mengapa ini bekerja dengan tata letak tabel tetapi tidak dengan elemen div? Karena baris dalam tabel memiliki ketinggian yang sama. Saat konten sel tabel tidak menggunakan semua ruang ketinggian yang tersedia, browser secara otomatis menambahkan bantalan vertikal untuk memusatkan konten.

properti posisi

Mari kita mulai dengan dasar-dasar penyelarasan vertikal div CSS:

• posisi: statis adalah default. Elemen dirender sesuai dengan urutan HTML;
• position: absolute - digunakan untuk menentukan posisi yang tepat dari suatu elemen. Posisi ini selalu dikaitkan dengan elemen induk terdekat yang posisinya relatif (bukan statis). Jika Anda tidak menentukan posisi yang tepat dari suatu elemen, Anda akan kehilangan kendali atasnya. Ini akan merender secara acak, sepenuhnya mengabaikan aliran dokumen. Secara default, elemen ditampilkan di sudut kiri atas;
• position: relative - digunakan untuk memposisikan elemen relatif terhadap posisi normalnya (statis). Nilai ini mempertahankan urutan aliran dokumen;
• position: fixed - digunakan untuk memposisikan elemen relatif terhadap jendela browser sehingga selalu muncul di viewport.

Catatan: beberapa properti ( atas dan indeks-z) hanya berfungsi jika elemen diatur ke posisi (bukan statis).

Mari kita turun ke bisnis!

Apakah Anda ingin menerapkan Perataan tengah vertikal CSS? Pertama buat elemen dengan posisi dan dimensi relatif. Misalnya: lebar dan tinggi 100%.

Langkah kedua mungkin berbeda tergantung pada browser target, tetapi salah satu dari dua opsi dapat digunakan:

• Properti lama: Perlu mengetahui ukuran jendela yang tepat untuk menghilangkan setengah lebar dan setengah tinggi. Lihat contoh;
• Properti CSS3 Baru: Anda dapat menambahkan properti transformasi dengan nilai terjemahan 50% dan blok akan selalu berada di tengah. Lihat contoh.

Pada dasarnya, jika Anda ingin memusatkan konten, tidak pernah menggunakan atas: 40% atau kiri: 300px . Ini berfungsi dengan baik di layar pengujian, tetapi tidak terpusat.

Ingat posisi: tetap? Anda dapat melakukan hal yang sama dengannya seperti dengan posisi absolut, tetapi Anda tidak memerlukan posisi relatif untuk elemen induk - itu akan selalu memposisikan relatif terhadap jendela browser.

Pernahkah Anda mendengar tentang spesifikasi flexbox?

Anda dapat menggunakan flexbox . Ini jauh lebih baik daripada pilihan lain. teks tengah menyelaraskan CSS secara vertikal. Dengan flexbox, mengelola elemen adalah permainan anak-anak. Masalahnya adalah beberapa browser seperti IE9 dan di bawahnya perlu dihapus. Berikut adalah contoh cara memusatkan blok secara vertikal:

Lihat contoh

Menggunakan tata letak flexbox, Anda dapat memusatkan beberapa kotak.

Jika Anda menerapkan apa yang telah Anda pelajari dari contoh-contoh ini, Anda akan dapat menguasai CSS menyelaraskan blok secara vertikal secepatnya.

Tautan dan bacaan lebih lanjut

Mempelajari Markup CSS

FlexBox Froggy

kotak pasir flexbox

Terjemahan artikel “ Perataan Vertikal CSS untuk Semua Orang (Termasuk Dummies)” disiapkan oleh tim proyek yang ramah.

Setiap perancang tata letak selalu dihadapkan pada kebutuhan untuk menyelaraskan konten dalam satu blok: secara horizontal atau vertikal. Ada beberapa artikel bagus tentang hal ini, tetapi semuanya menawarkan banyak pilihan yang menarik, tetapi sedikit praktis, itulah sebabnya Anda harus membuang waktu ekstra untuk menyoroti hal utama. Saya memutuskan untuk mengirimkan informasi ini dalam bentuk yang nyaman bagi saya, agar tidak ke google lagi.

Menyelaraskan Blok dengan Ukuran yang Diketahui

Cara termudah menggunakan CSS adalah dengan menyelaraskan kotak yang memiliki ketinggian yang telah ditentukan (untuk perataan vertikal) atau lebar (untuk perataan horizontal).

Sejajarkan dengan bantalan

Terkadang Anda tidak dapat memusatkan elemen, tetapi menambahkan batas dengan properti " lapisan".

Misalnya, ada gambar 200 x 200 piksel, dan kita ingin menempatkannya di tengah blok 240 x 300. Kita dapat mengatur tinggi dan lebar blok luar = 200px, dan menambahkan 20 piksel di bagian atas dan bawah, dan 50 di kiri dan kanan.

Menyelaraskan Blok yang Diposisikan Sepenuhnya

Jika blok disetel ke " posisi: mutlak", maka dapat diposisikan relatif terhadap induk terdekat dengan "posisi: relatif". Untuk ini, semua properti (" atas","Baik","bawah","kiri") dari blok dalam untuk menetapkan nilai yang sama, serta "margin: auto".

*Ada nuansa: Lebar (tinggi) blok bagian dalam + nilai kiri (kanan, bawah, atas) tidak boleh melebihi ukuran blok induk. Lebih aman untuk mengatur properti kiri (kanan, bawah, atas) ke 0 (nol).

Perataan horizontal

Sejajarkan dengan "text-align: center"

Untuk menyelaraskan teks dalam satu blok, ada properti khusus " perataan teks". Bila disetel ke " tengah" setiap baris teks akan disejajarkan secara horizontal. Untuk teks multibaris, solusi ini jarang digunakan, lebih sering opsi ini dapat ditemukan untuk menyelaraskan bentang, tautan, atau gambar.

Suatu kali saya harus membuat teks untuk menunjukkan cara kerja perataan teks dengan CSS, tetapi tidak ada hal menarik yang muncul di benak saya. Pada awalnya saya memutuskan untuk menyalin sajak anak-anak di suatu tempat, tetapi saya ingat bahwa ini dapat merusak keunikan artikel, dan pembaca kami yang terhormat tidak akan dapat menemukannya di Google. Dan kemudian saya memutuskan untuk menulis paragraf ini di sini - lagipula, intinya bukan dengan dia, tetapi intinya adalah keselarasan.

Perlu dicatat bahwa properti ini tidak hanya berfungsi untuk teks, tetapi juga untuk elemen sebaris ("tampilan: sebaris").

Tapi teks ini rata kiri, tetapi berada di blok yang berada di tengah relatif terhadap pembungkusnya.

Menyelaraskan blok dengan margin

Elemen level blok dengan lebar yang diketahui dengan mudah disejajarkan secara horizontal dengan mengaturnya ke "margin-left: auto; margin-right: auto". Singkatan biasanya digunakan: " margin: 0 otomatis" (Alih-alih nol, bisa ada nilai apa pun). Tetapi untuk perataan vertikal, metode ini tidak akan berfungsi.

Inilah cara menyelaraskan semua blok, jika memungkinkan (di mana pemosisian tetap atau absolut tidak diperlukan) - ini adalah yang paling logis dan memadai. Meskipun ini tampak jelas, saya kadang-kadang melihat contoh yang mengintimidasi dengan indentasi negatif, jadi saya pikir saya akan mengklarifikasi.

Perataan vertikal

Ada lebih banyak masalah dengan perataan vertikal - tampaknya, ini tidak disediakan di CSS. Ada beberapa cara untuk mencapai hasil yang diinginkan, tetapi semuanya tidak terlalu indah.

Alignment dengan properti line-height

Dalam kasus ketika hanya ada satu garis di blok, Anda dapat mencapai keselarasan vertikal dengan menerapkan " tinggi garis" dan mengaturnya ke ketinggian yang diinginkan. Agar aman, Anda juga harus mengatur "height", yang nilainya akan sama dengan nilai "line-height", karena yang terakhir tidak didukung di semua browser.

Dimungkinkan juga untuk menyelaraskan blok dengan banyak garis. Untuk melakukan ini, Anda harus menggunakan blok pembungkus tambahan, dan mengatur tinggi garisnya. Blok bagian dalam bisa multi-baris, tetapi harus "sebaris". Anda perlu menerapkan "vertical-align: middle" untuk itu.

Blok pembungkus harus memiliki set "ukuran font: 0". Jika Anda tidak mengatur ukuran font ke nol, maka browser akan menambahkan beberapa piksel tambahan itu sendiri. Anda juga harus menentukan ukuran font dan tinggi garis untuk blok bagian dalam, karena properti ini diwarisi dari induknya.

Perataan vertikal dalam tabel

Properti " vertikal-align" juga memengaruhi sel tabel. Dengan nilai yang disetel ke "tengah", konten di dalam sel dipusatkan. Tentu saja, tata letak tabel dianggap kuno saat ini, tetapi dalam kasus luar biasa dapat disimulasikan dengan menentukan " tampilan: sel tabel".

Saya biasanya menggunakan opsi ini untuk perataan vertikal. Di bawah ini adalah contoh tata letak yang diambil dari proyek yang sudah jadi. Ini adalah gambar yang dipusatkan secara vertikal dengan cara ini yang menarik.

Harus diingat bahwa jika elemen memiliki set "mengambang" selain "tidak ada", maka elemen tersebut akan berbentuk blok (tampilan: blok) - maka Anda harus menggunakan pembungkus blok tambahan.

Alignment dengan elemen inline tambahan

Dan untuk elemen sebaris, Anda dapat menerapkan " vertikal-align: tengah". Dalam hal ini, semua elemen dengan " tampilan: sebaris" yang berada di garis yang sama akan sejajar dengan garis tengah yang sama.

Anda perlu membuat blok bantu dengan ketinggian yang sama dengan tinggi blok induk, maka blok yang diinginkan akan berada di tengah. Lebih mudah menggunakan pseudo-element:before atau:after untuk ini.

Tampilan: fleksibel dan sejajar

Jika Anda tidak terlalu peduli dengan pengguna Explorer 8, atau sangat peduli sehingga Anda bersedia memasukkan javascript tambahan untuk mereka, maka "display: flex" dapat digunakan. Kotak fleksibel menangani masalah penyelarasan dengan sangat baik, dan cukup untuk menulis "margin: auto" untuk memusatkan konten di dalamnya.

Sejauh ini, metode ini praktis tidak pernah saya temui, tetapi tidak ada batasan khusus untuk itu.

Nah, itu saja yang ingin saya tulis tentang penyelarasan CSS. Sekarang memusatkan konten tidak akan menjadi masalah!

Artikel hari ini bertujuan untuk menunjukkan kepada Anda bagaimana menggunakan beberapa trik CSS untuk memusatkan div, baik secara horizontal maupun vertikal. Kami juga akan menunjukkan cara memusatkan seluruh halaman atau dalam satu elemen div.

Pemusatan sederhana elemen DIV pada halaman

Metode ini akan berfungsi dengan baik di semua browser.

css

Center-div ( margin: 0 otomatis; lebar: 100px; )

Contoh

Nilai otomatis di properti margin mengatur padding kiri dan kanan ke seluruh ruang yang tersedia di halaman. Hal penting untuk diingat di sini adalah bahwa div yang dipusatkan harus memiliki lebar yang ditetapkan.

Memusatkan DIV di dalam elemen DIV dengan cara lama

Metode div pusat ini akan berfungsi di semua browser.

css

Outer-div ( padding: 30px; ) .inner-div ( margin: 0 auto; width: 100px; )

HTML

Contoh

Div luar dapat diposisikan sesuka Anda, tetapi div dalam harus memiliki lebar yang ditentukan ( lebar).

Memusatkan DIV di dalam elemen DIV dengan inline-block

Dalam metode pemusatan div di dalam div ini, tidak perlu menentukan lebar elemen dalam. Ini akan bekerja di semua browser modern termasuk IE8.

css

Outer-div ( padding: 30px; text-align: center; ) .inner-div ( display: inline-block; padding: 50px; )

HTML

Contoh

Properti perataan teks hanya berfungsi pada elemen sebaris. Nilai blok sebaris memungkinkan div dalam dirender sebagai elemen sebaris serta blok ( blok sebaris). Properti text-align pada div luar akan memungkinkan kita untuk memusatkan div dalam.

Memusatkan DIV di dalam elemen DIV secara horizontal dan vertikal

Di sini margin: auto digunakan untuk memusatkan div di tengah halaman. Contoh ini akan berfungsi di semua browser modern.

css

Outer-div ( padding: 30px; ) .inner-div ( margin: auto; width: 100px; height: 100px; )

HTML

Contoh

Div bagian dalam harus memiliki lebar ( lebar) dan tinggi ( tinggi). Metode ini tidak akan berfungsi jika div luar memiliki ketinggian tetap.

Memusatkan DIV di bagian bawah halaman

Di sini, margin: auto digunakan untuk memusatkan div secara vertikal dan posisi absolut digunakan untuk elemen luar. Metode ini akan berfungsi di semua browser modern.

css

Outer-div ( position: absolute; bottom: 30px; width: 100%; ) .inner-div ( margin: 0 auto; width: 100px; height: 100px; background-color: #ccc; )

HTML

Contoh

Div bagian dalam harus memiliki set lebar. Ruang di bagian bawah halaman disesuaikan menggunakan properti bawah dari div luar. Anda juga dapat memusatkan div di bagian atas halaman dengan mengganti properti bawah dengan properti atas.

Memusatkan DIV pada halaman secara vertikal dan horizontal

Di sini, untuk menyelaraskan tengah div, margin: auto digunakan lagi dan div luar diposisikan absolut. Metode ini akan berfungsi di semua browser modern.

css

Center-div ( position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; )

Contoh

Elemen div harus memiliki set lebar ( lebar) dan tinggi ( tinggi).

Pemusatan responsif elemen DIV pada halaman

Di sini, untuk memusatkan div dengan CSS, kita membuat lebar elemen div menjadi responsif sehingga merespons pengubahan ukuran jendela. Metode ini berfungsi di semua browser.

css

Center-div ( margin: 0 auto; max-width: 700px; )

Contoh

Div terpusat harus memiliki set properti max-width-nya.

Memusatkan DIV di dalam elemen menggunakan properti blok dalam

Div bagian dalam responsif di sini. Metode memusatkan div di dalam div ini akan berfungsi di semua browser.

css

Outer-div ( padding: 30px; ) .inner-div ( margin: 0 auto; max-width: 700px; )

HTML

Contoh

Div bagian dalam harus memiliki set properti max-width-nya.

Memusatkan dua div responsif di samping satu sama lain

Di sini kita memiliki dua div responsif berdampingan. Metode memusatkan div pada layar ini akan berfungsi di semua browser modern.

css

Wadah ( text-align: center; ) .left-div ( display: inline-block; max-width: 300px; vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) layar dan (max-width: 600px) ( .left-div, .right-div ( kiri max-width: 100%; ) )

HTML

Contoh

Di sini kita memiliki beberapa elemen dengan properti inline-block yang diterapkan di dalam wadah terpusat. Contoh ini juga menggunakan kueri media CSS; yaitu, jika ukuran layar kurang dari 600 piksel, maka properti max-width untuk div kiri dan kanan diatur ke 100%.

Elemen DIV berpusat dengan Flexbox

Di sini kita memusatkan div CSS menggunakan Flexbox . Hal ini dimaksudkan untuk mempermudah proses perancangan user interface. Plugin ini didukung oleh Chrome 38+ , IE11 , Microsoft Edge , Firefox 38+ , Safari 9+ , Opera 30+ , iOS Safari 9+ , dan Android Browser 40+ .

css

Wadah ( display: flex; align-items: center; justify-content: center; height: 100vh; ) .item ( background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; )