Mengekspresikan TI

Sebelum kita harus berurusan dengan CSS untuk membuat layout halaman kami, menyelaraskan beberapa konten di dalam sel tabel tampak bermain hanya anak. Cukup mengatur "menyelaraskan" atau "valign" properti dari tabel memiliki keselarasan pilihan Anda, sepotong kue!
Dengan layout CSS, meskipun kita memiliki "vertical-align" properti untuk unsur-unsur, itu tampaknya tidak sesederhana sebagai "align" atau "valign" properti. Untuk lebih specifiic yang "vertical-align" sepertinya tidak pernah memecahkan masalah Anda, terutama jika sedang menulis sepotong lintas-browser CSS.

Tanpa menggunakan Tabel HTML, MASALAH keterpusatan pada objek, baik itu gambar atau teks dalam sebuah divisi yang mengandung, mungkin telah menjadi setiap UI / CSS pengembang mimpi buruk di beberapa titik. Masalah ini lebih lanjut mengekstrapolasikan kekhawatiran Anda menyelaraskan, jika objek yang akan berpusat bersifat dinamis, yaitu bila tinggi adalah variabel (tinggi tidak diketahui).

Meskipun tidak ada solusi diketahui lurus ke depan yang akan bekerja di berbagai browser kita harus berurusan dengan, solusi bahwa saya telah mencoba untuk sampai pada tampaknya untuk bekerja di browser beberapa yang saya telah mencobanya di (IE6, IE 7 , FF).

SOLUSI:
Dalam browser seperti Mozilla, Opera dan Safari, Yang aneh berperilaku "vertical-align" properti dapat dibawa ke indra, hanya dengan mengatur "layar" milik divisi mengandung untuk "sel tabel-" (display: table-cell) .

Masalahnya masih tetap dengan keluarga IE browser, yang, namun tampaknya tidak memahami apa yang harus dengan properti "tabel-sel" dan bodoh seperti mereka, mereka hanya mengabaikannya. Solusi yang diberikan di bawah, meskipun sederhana, iklan sebuah elemen DOM lebih sedikit HTML untuk membuat sesuatu terjadi.

CSS dan HTML terlihat seperti ini
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> views: 3456 </ div>
</ Div>
</ Div>

Hasilnya terlihat seperti ini: -

melihat demo di sini | File Sumber Unduh (download 451 kali)

---

Memahami solusi:
Untuk browser yang memahami display: table dan display: table-cell properti, jarang membutuhkan penjelasan apapun. Untuk IE, dengan penggunaan hack spesifik IE (hack hash), kami benar-benar memposisikan wadah objek (obj_container) dalam setengah dari tinggi tersedia. Kemudian objek (obj) adalah dalam posisi yang relatif dan digerakkan oleh setengah dari tingginya ... Nah! Aku tampaknya memahami tampilan di wajah Anda, tetapi Ia bekerja. Cobalah!
Teknik di atas digabungkan untuk memberikan solusi atas peramban silang.

---

CSS dapat dengan mudah dimodifikasi seperti di bawah ini untuk mencapai, vertical-align: top atau vertical-align: bawah

TOP Align CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> dilihat: 1234 </ div>
</ Div>
</ Div>

Hasilnya terlihat seperti ini: -

BOTTOM Align CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> dilihat: 1234 </ div>
</ Div>
</ Div>

Hasilnya terlihat seperti ini: -

melihat demo di sini | Download disini

---

Pemusatan horizontal dari objek hanya dicapai dengan properti margin, dengan menetapkan margin-left dan margin kanan untuk auto

Sepertinya usia, karena saya sedang berusaha mencari solusi yang masuk akal untuk masalah keselarasan. Tapi sekarang dengan solusi ini, saya merasa tenang sedikit.

Dengan harapan bahwa suatu hari nanti

• vertikal-alignment properti dalam CSS akan bekerja seperti itu tidak di dalam sel tabel, TANPA harus mengalahkan banyak-tele
• Setidaknya, pengaturan margin-top: otomatis dan margin-bottom: otomatis, akan memberikan akibat yang sama seperti dengan margin-left dan margin-right set ke auto
• Perang Browser akan berakhir beberapa hari.
• Akan ada hanya SATU untuk SEMUA Browser.

Download CSS dan HTML solusi di atas sini (download 451 kali) .. untuk dimengerti, CSS tersebut belum dioptimalkan

PS: Dan omong-omong, mereka adalah thumbnail dari beberapa foto saya telah mengklik ...