Panduan pengaturan CENTER dalam CSS

Mungkin anda seringkali kesal dengan masalah pengaturan perataan center dengan css. Kadang kita tidak pas dalam membuat sebuah div lalu kita ingin posisinya ditengah atau kita ingin teks yang ada dalah kotak div kita benar-benar posisinya ditengah kotak. Untuk beberapa contoh sederhana mungkin kita tidak kesulitan tapi kadang akan muncul masalah jika kode yang kita susun semakin komplek sehingga bayak object yang harus diperhatikan.

Nah saya menemukan sebuah artikel mengenai cara pengaturan CENTER dalam CSS yang sering membuat orang bingung. Artikel ini menjelaskan dengan detil perbedaan masing-masing komponen beserta dengan contohnya. jadi hal ini sangat memudahkan kita dan sangat membantu anda dalam memahami bagaimana penggunaan yang benar. Anda bisa cek sendiri artikelnya disini: http://css-tricks.com/centering-css-complete-guide/

 

 

 Sebuah Panduan Lengkap Diterbitkan September 2, 2014 oleh Chris Coyier Centering hal di CSS adalah anak poster dari CSS mengeluh. Mengapa harus begitu keras? Mereka mengejek. Saya pikir masalah ini tidak sulit untuk dilakukan, tetapi dalam bahwa ada begitu banyak cara yang berbeda untuk melakukannya, tergantung pada situasi, sulit untuk tahu mana yang harus meraih. Jadi mari kita membuat pohon keputusan dan mudah-mudahan membuatnya lebih mudah. Saya perlu ke pusat … horizontal Apakah inline atau elemen * inline- (seperti teks atau link)? Anda dapat memusatkan elemen inline horizontal, dalam elemen induk blok-tingkat, dengan hanya: .center-anak {    text-align: center; } Hal ini akan bekerja untuk inline, inline-block, inline-tabel, inline-flex, dll Apakah elemen tingkat blok? Anda dapat pusat elemen blok-tingkat dengan memberi margin-left dan margin-right auto (dan memiliki lebar set, jika tidak maka akan menjadi lebar penuh dan tidak perlu centering). Itu sering dilakukan dengan singkatan seperti ini: .center-me {    margin: 0 auto; } Ini akan bekerja tidak peduli apa lebar elemen tingkat blok Anda pemusatan, atau orang tua. Perhatikan bahwa Anda tidak bisa mengapung elemen ke pusat. Ada trik sekalipun. Apakah ada unsur tingkat lebih dari satu blok? Jika Anda memiliki dua atau lebih elemen blok-tingkat yang perlu berpusat horizontal berturut-turut, kemungkinan Anda akan lebih baik dilayani membuat mereka jenis tampilan yang berbeda. Berikut ini adalah contoh membuat mereka inline-block dan contoh flexbox: Kecuali Anda berarti Anda memiliki beberapa elemen-elemen tingkat blok ditumpuk di atas satu sama lain, dalam hal teknik marjin otomatis masih baik-baik saja: vertikal Centering vertikal adalah sedikit lebih sulit dalam CSS. Apakah inline atau elemen * inline- (seperti teks atau link)? Apakah satu baris? Kadang-kadang elemen inline / teks dapat muncul vertikal terpusat, hanya karena ada bantalan yang sama di atas dan di bawah mereka. .link {    padding-top: 30px;    padding-bottom: 30px; } Jika bantalan tidak menjadi pilihan untuk beberapa alasan, dan Anda mencoba untuk pusat beberapa teks yang Anda tahu tidak akan membungkus, ada trik yang membuat line-height sama dengan tinggi akan pusat teks. .center-teks-trick {    height: 100px;    line-height: 100px;    white-space: nowrap; } Apakah beberapa baris? Padding sama di atas dan bawah dapat memberikan efek berpusat untuk beberapa baris teks juga, tapi kalau itu tidak akan bekerja, mungkin unsur teks dalam bisa menjadi sel tabel, baik secara harfiah atau dibuat untuk berperilaku seperti satu dengan CSS. Properti vertical-align menangani ini, dalam hal ini, tidak seperti apa yang biasanya tidak yang menangani penyelarasan elemen sejajar pada baris. (Lebih lanjut tentang itu.) Jika ada sesuatu tabel seperti keluar, mungkin Anda bisa menggunakan flexbox? Sebuah flex-anak pun dapat dibuat untuk pusat dalam flex-orang tua cukup mudah. .flex-pusat-vertikal {    display: melenturkan;    membenarkan-konten: center;    flex-arah: kolom;    height: 400px; } Ingat bahwa itu hanya benar-benar relevan jika wadah induk memiliki tinggi tetap (px,%, dll), yang mengapa wadah sini memiliki ketinggian. Jika kedua teknik ini, Anda bisa menggunakan “hantu elemen” teknik, di mana elemen semu tinggi penuh ditempatkan di dalam wadah dan teks vertikal sejajar dengan itu. .ghost-pusat {    position: relative; } .ghost-pusat :: sebelum {    isi: “”;    display: inline-block;    height: 100%;    width: 1%;    vertical-align: middle; } .ghost-pusat p {    display: inline-block;    vertical-align: middle; } Apakah elemen blok-tingkat? Apakah Anda tahu ketinggian elemen? Ini cukup umum untuk tidak tahu ketinggian di tata letak halaman web, untuk banyak alasan: jika perubahan lebar, teks reflow dapat mengubah ketinggian. Varians dalam styling dari teks dapat mengubah ketinggian. Varians dalam jumlah teks dapat mengubah ketinggian. Elemen dengan aspek rasio tetap, seperti gambar, bisa mengubah tinggi ketika diubah ukurannya. Dll Tapi jika Anda tahu ketinggian, Anda dapat pusat vertikal seperti: .parent {    position: relative; } .child {    position: absolute;    top: 50%;    height: 100px;    margin-top: -50px; / * Akun untuk padding dan perbatasan jika tidak menggunakan box-sizing: border-kotak; * / } Apakah unsur ketinggian yang tidak diketahui? Ini masih mungkin untuk memperbaiki posisi dengan menyenggol itu setengah dari itu tinggi setelah menabrak turun setengah: .parent {    position: relative; } .child {    position: absolute;    top: 50%;    transform: translateY (-50%); } Dapatkah Anda menggunakan flexbox? Tidak ada kejutan besar, ini jauh lebih mudah di flexbox. .parent {    display: melenturkan;    flex-arah: kolom;    membenarkan-konten: center; } Keduanya Horisontal dan Vertikal Anda dapat menggabungkan teknik di atas dalam mode untuk mendapatkan elemen sempurna terpusat. Tapi aku menemukan ini umumnya jatuh ke dalam tiga kubu: Apakah unsur lebar tetap dan tinggi? Menggunakan margin negatif sebesar setengah dari yang lebar dan tinggi, setelah Anda benar-benar diposisikan pada 50% / 50% akan pusat dengan dukungan browser salib besar: .parent {    position: relative; } .child {    width: 300px;    height: 100px;    padding: 20px;    position: absolute;    top: 50%;    kiri: 50%;    margin: 0 0 -70px -170px; } Apakah unsur lebar tidak diketahui dan tinggi? Jika Anda tidak tahu lebar atau tinggi, Anda dapat menggunakan mengubah properti dan negatif menerjemahkan dari 50% di kedua arah (didasarkan pada arus lebar / tinggi elemen) ke pusat: .parent {    position: relative; } .child {    position: absolute;    top: 50%;    kiri: 50%;    transform: translate (-50%, -50%); } Dapatkah Anda menggunakan flexbox? Untuk pusat di kedua arah dengan flexbox, Anda perlu menggunakan dua sifat centering: .parent {    display: melenturkan;    membenarkan-konten: center;    menyelaraskan-item: center; } kesimpulan Anda benar-benar dapat memusatkan hal dalam CSS. SAHAM PADA Twitter Facebook Google+ Artikel terkait Berpusat di Diketahui Ketika datang untuk memusatkan hal dalam desain web, semakin banyak informasi yang Anda miliki tentang elemen yang terpusat dan … Baca Artikel ? Sebuah Panduan Lengkap untuk Elemen Table elemen dalam HTML digunakan untuk menampilkan data tabular. Anda dapat menganggap itu sebagai cara untuk … Baca Artikel ? komentar Scott Fennell Tautkan ke komentar # 2 Sep 2014 Ide bagus! Saya suka konsep artikel ini dan juga struktur show / hide. Saya salut Anda, Sir. Namun, saya pikir Anda kehilangan semangat dibalik klasik “??centering sulit” keluhan di beberapa tempat, yang, setidaknya bagi saya, selalu datang kembali tidak mengetahui ketinggian elemen. 1) Tampilan Anda: memperbaiki sel-tabel bergantung pada mengetahui ketinggian elemen anak. 2) Dalam Anda “itu memblokir level” -> “adalah unsur ketinggian yang tidak diketahui” Anda melanjutkan untuk memberikan orangtua ketinggian eksplisit. Bagi saya, yang mengalahkan tujuan mencoba untuk menangani skenario yang tidak diketahui-tinggi. Jika saya tidak tahu ketinggian anak, itu sangat umum bagi saya untuk juga tidak tahu ketinggian orangtua. 3) Dalam “kedua hor & vert contoh” Anda di mana ketinggian tidak diketahui, itu sedikit aneh untuk memiliki anak menjadi pos: mutlak dan menyiratkan bahwa ini bukan masalah besar. Saya pikir pos: absolute adalah peringatan besar ketika meletakkan hal-hal, karena dapat memiliki konsekuensi yang tidak diinginkan memiliki lapisan elemen lebih dari satu sama lain. 4) Selain itu, dalam pena yang sama, elemen gagal untuk tinggal vertikal terpusat jika memiliki saudara yang membentang ketinggian vertikal orangtua. Apapun, saya masih benar-benar menyukai ide ini-itu sangat dibutuhkan. Aku hanya berpikir itu akan lebih baik jika Anda mengakui beberapa peringatan yang saya pikir merupakan akar dari keluhan Anda mencoba untuk mengabaikan. Reply ? Chris Coyier Tautkan ke komentar # 2 Sep 2014 1) Itu tidak benar-benar. Aku diperbaharui contoh untuk menempatkan ketinggian di atas meja sebagai gantinya. 2) Vertikal centering hanya relevan jika orang tua memiliki seperangkat tinggi. Jika orang tua tidak memiliki satu set tinggi, apa yang kau berpusat dalam? Bahkan jika jawabannya adalah “seluruh halaman”, maka Anda perlu untuk mengatur ketinggian (mungkin) baik html, tubuh 3) Itu adil. Ini hanya salah satu contoh. Dalam pengalaman saya, jika Anda mencoba untuk memusatkan sesuatu kedua cara seperti itu, itu mungkin modal, di mana absolut (atau tetap) positioning akan digunakan. Jika tidak, Anda dapat menggabungkan salah satu teknik lain yang diperlukan. Dan selalu ada flexbox yang saya menutupi banyak. 4) Demo saya yang satu ini? Saya mengalami waktu picturing / reproduksi keras. Scott Fennell Tautkan ke komentar # 2 Sep 2014 Hey Chris! Terima kasih atas jawabannya. Re # 1: Saya merasa seperti kita kehilangan satu sama lain yang satu ini. Hal pertama yang saya lakukan ketika aku melihat pena itu menghapus tabel HTML, karena itu tidak realistis / pilihan untuk sebagian besar kasus penggunaan saya, meskipun mungkin aku menjadi terlalu meja-fobia di sana. Apapun, yang meninggalkan html div, yang memang tidak memiliki ketinggian eksplisit, yang adalah apa yang powering centering vertikal. Hasil: http://codepen.io/anon/pen/xIvqh Re # 2: Aku benar-benar berada di jalur yang sama di sini sebagai commenter Anda hanya terkubur nada. Katakanlah saya ingin vertikal pusat dua saudara kandung inline-blok ketinggian yang berbeda: http://codepen.io/anon/pen/Cjdeo Re # 3: Gencatan Senjata. Re # 4: Benar-benar titik yang sama seperti # 2, meskipun saya tidak menangkap pos bahwa: absolut adalah bagian dari satu ini juga, yang tidak jenis mengalihkan perhatian dari masalah ketinggian (fakta bahwa unsur-unsur yang berlapis-lapis di atas satu sama lain adalah lebih eye-catching tata letak bug selain fakta bahwa mereka tidak vertikal terpusat):. http://codepen.io/anon/pen/rjflG. Scott Fennell Tautkan ke komentar # 2 Sep 2014 Maaf, saya agak disalahartikan, keliru apa yang Anda lakukan dengan # 1. Gencatan Senjata di sana, juga. sodawillow Tautkan ke komentar # 2 Sep 2014 Anda juga dapat menggunakan posisi absolut dengan cara ini: Lihat margin Pen Vertikal: auto oleh sodawillow (sodawillow) dari CodePen. Reply ? Kseso Tautkan ke komentar # 2 Sep 2014 Beberapa waktu yang lalu saya mengumpulkan 24 kasus yang berbeda dari “centering dengan css” http://ksesocss.blogspot.com/2012/05/centrando-al-centro-con-css-16-maneras.html Blog Spanyol, tetapi kode adalah kode Reply ? Jon Tautkan ke komentar # 2 Sep 2014 Seberapa baiknya untuk membuat ini? { position: absolute; top: 0; kiri: 0; kanan: 0; bottom: 0; margin: auto; width: ‘N’; height: ‘N’; } Ini tidak bekerja dengan baik di Opera, tapi aku suka de konsep. Reply ? sodawillow Tautkan ke komentar # 2 Sep 2014 http://codepen.io/sodawillow/pen/yqnaC/:-p tampaknya bekerja di opera di sini (win) 🙂 João Batista Ferreira Tautkan ke komentar # 3 September 2014 Yeah! Tentu … Aku lupa satu hal: menggunakan min-height sebagai gantinya. Tidak ada tinggi tetap tidak bekerja. Terima dunia Brad Westfall Tautkan ke komentar # 2 Sep 2014 Hanya ingin menambahkan lightbox (absolut) centering ke dalam campuran untuk horisontal bagi siapa saja membantu Reply ? mark Tautkan ke komentar # 2 Sep 2014 memiliki orangtua menjadi display: table; dan anak sebagai display: table-cell; vertical-align: middle; juga memiliki tempat dalam solusi potensial. Reply ? Zeke Y Tautkan ke komentar # 2 Sep 2014 Terima kasih! Saya berencana menggunakan ini banyak 🙂 Reply ? Thomas Tautkan ke komentar # 2 Sep 2014 Masalah saat menggunakan engkau mengubah properti dan negatif menerjemahkan dari 50% di kedua arah (ketika berpusat secara horisontal dan vertikal unsur lebar tidak diketahui dan tinggi) adalah bahwa hasil akan sering kabur (tergantung pada ukuran yang tepat dari yang pertama orangtua dengan posisi non statis) pada saat hasil dari -50% bukan integer. Saya kira blur tidak terlihat pada layar retina tetapi di layar kebanyakan orang itu mengerikan: / Reply ? shshaw Tautkan ke komentar # 3 September 2014 Setuju. Saya bukan penggemar menggunakan transformasi pada konten berbasis teks. Browser mendapatkan lebih baik tentang rendering, tetapi Anda masih berakhir dengan fuzzy, teks sulit dibaca banyak waktu. Mazurka Tautkan ke komentar # 4 September 2014 Appearntly ada perbaikan dengan menambahkan melestarikan-3d ke orangtua. Chris Poteet Tautkan ke komentar # 2 Sep 2014 Chris – Anda mungkin ingin menambahkan bahwa untuk elemen-elemen tingkat blok horizontal pusat dengan margin: 0 auto; itu harus memiliki ukuran yang tetap. Anda tidak menyebutkan secara khusus. Reply ? ergergerg Tautkan ke komentar # 2 Sep 2014 Tidak diperlukan karena blok elemen yang lebar penuh secara default dan tidak perlu keselarasan horizontal saat mengisi seluruh ruang keseluruhan tersedia pula. hotdog Johnson Tautkan ke komentar # 2 Sep 2014 Apa-apa tentang vertical-align, eh. Properti yang paling berharga yang pernah. Mengapa? Mengapa begitu membingungkan, sulit, dan hack-y ke pusat beberapa konten dalam blok tetap tinggi? Hal ini terus tidak masuk akal bagi saya. Aku sangat lelah. Aku sangat lelah. Reply ? Stephy Miehle Tautkan ke komentar # 2 Sep 2014 Ini disebutkan di bawah Vertikal -> Beberapa Baris. Tapi benar-benar setuju bahwa proses ini jauh lebih clunkier dari yang seharusnya! Konsep ini sangat mendasar, tapi lihat berapa banyak solusi potensial yang kita miliki … Orangestar Tautkan ke komentar # 2 Sep 2014 Panduan yang sangat baik! Kesalahan kecil meskipun: Anda menggunakan “itu” bukan “di mana” di bawah Vertikal> Inline> Single Line. Reply ? Gerrit van Aaken Tautkan ke komentar # 2 Sep 2014 Anda bisa menambahkan “setengah pixel” memperbaiki vertikal “menerjemahkan” hack, http://zerosixthree.se/vertical-align-apa dengan-hanya-3-baris-of-css/ (update dari April 2014) Reply ? Stollz Tautkan ke komentar # 3 September 2014 Ah, saya hanya menulis tentang hal sialan kabur. Terima kasih atas tanggapan ini berguna! Veronique Tautkan ke komentar # 3 September 2014 Terima kasih untuk link untuk memperbaiki setengah pixel. Saya selalu berusaha untuk menghindarinya dengan memastikan line-height saya dan semua bantalan dalam piksel dan bahkan nomor (seperti itu tinggi selalu genap). Tapi perbaikan yang Anda berikan membuat ini lebih mudah. Ingo Tautkan ke komentar # 3 September 2014 Panduan lengkap sangat berguna. Terima kasih banyak untuk gambaran ini sangat baik dan jelas! Bookmarked:-) Reply ? bobby Tautkan ke komentar # 3 September 2014 Cara lain untuk horizontal centering elemen lebar tidak diketahui seperti & lt; tombol & gt; tanpa bergantung pada orang tua tombol {    display: table;    margin: 0 auto; } Reply ? Stollz Tautkan ke komentar # 3 September 2014 Meskipun saya merasa solusi yang paling elegan, posisi vertikal dengan menerjemahkan (-50%) menghasilkan konten kabur di Chrome di Windows, beberapa versi. Reply ? NMitra Tautkan ke komentar # 3 September 2014 div {    display: melenturkan; } div div {    margin: auto; } Reply ? Martin Rinehart Tautkan ke komentar # 3 September 2014 Indah Singkatnya, Chris. Langsung ke Webliografi buku CSS saya. Oleh oleh, keluhan yang sebagian karena “” sangat sederhana dan “margin: 0 auto” adalah kludge seperti itu. Ini masih CSS yang paling buruk. Reply ? Tri Nguyen Tautkan ke komentar # 3 September 2014 Jika saya perlu untuk pusat div lebar konten dinamis, saya tidak dapat menggunakan margin: 0 auto trik. Dalam hal ini, harus saya hanya mengubahnya menjadi pajangan: elemen inline-block? Bagaimana jika solusi itu tidak mungkin? Reply ? qwdqw Tautkan ke komentar # 3 September 2014 DIVs tidak menyusut agar sesuai (kecuali melayang), jadi jika Anda tidak menambahkan lebar itu akan selalu menjadi lebar penuh, di mana Anda tidak perlu centering horisontal. Jadi, Anda harus menambahkan lebar pula. Atau gunakan inline-blick karena Anda sudah mengatakan. Sean Jacob Tautkan ke komentar # 3 September 2014 Anda juga dapat menggunakan teknik line-height untuk beberapa baris juga dan memiliki dukungan browser yang lebih baik – .box {height: 200px; line-height: 200px; } .middle {display: inline-block; vertical-align: middle; line-height: 1.2; } Reply ? wef Tautkan ke komentar # 3 September 2014 Sebenarnya, itu hanya satu baris / wadah dengan beberapa baris di dalamnya. Jika Anda ingin beberapa baris / kontainer rusak. Sean Jacob Tautkan ke komentar # 3 September 2014 Dapatkah Anda menunjukkan saya sebuah contoh? Jika Anda ingin beberapa kontainer Anda harus menempatkan mereka dalam elemen .middle bukan menciptakan beberapa elemen .middle. Red Tautkan ke komentar # 3 September 2014 FWIW, mungkin CSS ukuran intrinsik mungkin menjadi (futuristik) alternatif untuk horizontal berpusat elemen blok? Reply ? shshaw Tautkan ke komentar # 3 September 2014 Di masa depan, tentu. Saat ini, dukungan browser untuk ukuran intrinsik tidak buruk untuk lebar, tetapi dukungan untuk fit-konten di ketinggian mengerikan. Jon Tautkan ke komentar # 3 September 2014 Akan asyik jika Anda pergi kompatibilitas browser untuk setiap metode! Reply ? shshaw Tautkan ke komentar # 3 September 2014 Aku mengumpulkan tabel perbandingan dengan kompatibilitas browser untuk metode ini berbeda dan beberapa yang tidak disebutkan. Lihat “Tabel Perbandingan” di http://codepen.io/shshaw/full/gEiDt/ Kebanyakan semua ini harus bekerja di IE8 +, tetapi transformasi hanya akan bekerja di IE9 +. Ada informasi lebih lanjut tentang masing-masing teknik di bawah “Teknik Lain” shshaw Tautkan ke komentar # 3 September 2014 Roundup besar. Terkejut tidak ada menyebutkan margin: auto sebagai solusi untuk tetap lebar / tinggi, meskipun:-) Dalam Anda “Ghost Centering” contoh, di bawah vertikal> Inline> Beberapa Lines, hanya bekerja di sini karena Anda memiliki lebar tetap pada elemen inline yang berpusat. Karena mereka berdua display: inline-block, browser secara otomatis menempatkan ruang antara mereka. Jika Anda menghapus lebar tetap, Anda berakhir dengan konten Anda didorong turun oleh :: sebelum elemen,: Sebuah metode yang lebih aman dari keterpusatan cara ini adalah dengan menggunakan :: setelah gantinya. Dengan cara ini konten yang sebenarnya tidak akan pernah ditekan oleh elemen semu. Anda juga dapat menghapus lebar tetap pada konten dan menggunakan letter-spacing: -0.5em untuk mencegah kesenjangan antara unsur semu dan elemen yang terpusat. Kemudian reset dengan letter-spacing: normal pada elemen terpusat. Reply ? Armstrongest Tautkan ke komentar # 3 September 2014 Hey Chris. Ini adalah sumber daya yang fantastis. Saya pikir apa yang akan super berguna adalah jika Anda menambahkan beberapa pedoman dasar untuk kapan harus menggunakan yang mana. Ini terutama tentang kompatibilitas browser, yang mana saya pikir banyak orang mendapatkan kabur. Mungkin jika matriks dibuat di mana Anda periksa dari browser Anda ingin mendukung dan kemudian hanya metode yang relevan disorot. Saya punya beberapa ide tentang bagaimana melakukan ini dengan menggunakan artikel ini sebagai dasar … Aku harus benar-benar mulai blogging. Reply ? aadvay Tautkan ke komentar # 3 September 2014 Nice post …. Ini membantu banyak …. Reply ? Josh Hadik Tautkan ke komentar # 3 September 2014 Ini banyak membantu saya. Namun, aku masih mengalami kesulitan berpusat beberapa divs dalam garis. Jika Anda punya waktu, silakan cek situs saya (Aku baru untuk pengembangan web jadi jangan menilai ke hard) Website saya dan melihat di 5 lingkaran di bagian atas halaman … saat ini, mereka tidak berpusat horizontal (ada lebih banyak ruang kosong di satu sisi kemudian yang lain,) aku bertanya-tanya jika Anda tahu bagaimana untuk memperbaiki masalah ini sehingga semuanya berpusat pada halaman. Terima kasih untuk waktu Anda. Reply ? josuevelazquez Tautkan ke komentar # 3 September 2014 Besar Post! Cara Anda membuat berbagai kolom sama tinggi, sangat sederhana dengan tampilan: melenturkan; ! Berharap ada dukungan untuk IE 9 setidaknya. Apakah seseorang tahu yang sederhana “fallback” untuk ini? Reply ? Michael Bjerregaard Tautkan ke komentar # 4 September 2014 Jesus manis! Transformasi: menerjemahkan (-50%, -50%); benar-benar hebat … Saya tidak percaya saya tidak pernah memikirkan hal ini. Aku tidak menyadari bahwa ini sangat baik didukung. Hidup baru saja lebih baik:-) Thx Chris untuk melayani panduan yang sangat berguna! Reply ? Matt Tautkan ke komentar # 4 September 2014 Anda, Sir, layak mendapatkan acungan jempol! Reply ? Ricardo Zea Tautkan ke komentar # 4 September 2014 Saya pribadi tidak pernah menggunakan nilai “0” ketika menggunakan margin. Aku selalu menggunakan margin: auto;, itu saja. Tidak pernah memiliki aku punya masalah apapun yang meninggalkan 0. Hanya bilang ‘. Keren Ide pohon keputusan! Reply ? Amanda Tautkan ke komentar # 5 September 2014 Saya suka situs ini begitu banyak! Aku sudah memecahkan banyak masalah CSS dengan datang ke sini! Terima kasih Chris! Reply ? Pierre Tautkan ke komentar # 6 September 2014 Hi Chris, artikel bagus seperti biasa dan sangat berguna! Hati-hati, contoh CodePen dialihkan dari satu cabang / ayat yang lain (misalnya: elemen ghost contoh harus di Vertikal / inline / beberapa baris, sebenarnya di vertikal / blok / kau tahu tinggi) Ceria, Pierre Reply ? Vishnu Haridas Tautkan ke komentar # 7 September 2014 Terorganisasi artikel. Berpusat di CSS selalu sakit untuk para pengembang web. Panduan ini adalah hidup hemat bagi mereka! Saya selalu menggunakan line-height untuk penyelarasan vertikal untuk teks. Jika tidak, saya berpikir untuk menggunakan Javascript untuk menyelaraskan elemen saat memuat halaman;-) tapi itu bukan cara yang benar! Terima kasih untuk artikel ini! Reply ? Rajesh Tautkan ke komentar # 8 September 2014 Terima kasih banyak untuk informasi yang besar Anda. Ini adalah harus membaca informasi untuk CSS pemula. Reply ? andychups Tautkan ke komentar # 9 September 2014 “Apakah unsur lebar tidak diketahui dan tinggi?” – I preffer antipeluru, solusi oldschool dengan meja http://codepen.io/andychups/pen/CDLxK. By the way, saya suka tweet: “. Cara termudah untuk vertikal pusat sesuatu dalam CSS adalah untuk menutup laptop Anda dan pergi ke bar”bleikamp 🙂 Reply ? Casper Kuijjer Tautkan ke komentar # 10 September 2014 Hi Chris, Apakah Anda tahu apakah ada pilihan untuk teks secara vertikal pusat berdasarkan x-tingginya bukan seluruh ketinggian teks? Pada saat wadah ini sedikit lebih besar dari font-size ini mungkin lebih disukai. Pilihan saya bisa memikirkan hanya bekerja untuk satu baris teks dan terdiri dari penambahan elemen semu dengan tinggi diatur ke ketinggian wadah dan vertical-align: middle; diterapkan. Lihat http://codepen.io/ckuijjer/pen/nIGCt Reply ? Dan Henderson Tautkan ke komentar # 13 September 2014 Nice one. Selalu ada banyak pilihan yang berbeda, tapi saya pikir frustrasi intinya ada cara bodoh bukti vertikal centering sesuatu dengan dukungan browser yang layak dan tidak menambahkan semacam markup tambahan. Selalu merasa sedikit Hacky dan kotor mana cara saya akhirnya pergi, tapi kurasa centering vertikal tidak sendirian di sana. Jika tinggi induk diketahui, saya biasanya menambahkan bahwa sebagai line-height pada yang tua dan inline memblokir anak, sehingga ketinggian anak bisa bervariasi. Jika tinggi induk tidak diketahui saya biasanya benar-benar diposisikan anak dan bergerak di sekitar sebagai perlu. Reply ? Lukasz Bacik Tautkan ke komentar # 16 September 2014 Terima kasih banyak untuk kode yang berguna;) Reply ? Tinggalkan Komentar Nama * EmailWebsite komentar BoldItalicLinkQuoteInline CodeBlock Kode WritePreviewUse penurunan harga atau dasar HTML dan menyenangkan. Posting Kode Gunakan penurunan harga, dan itu akan melarikan diri kode untuk Anda,

(Visited 683 times, 1 visits today)

Related Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

WhatsApp chat