Mengekspresikan TI

Lain tut cepat. Berikut ini adalah sesuatu yang sederhana dan bagus menggunakan POWER CSS ... tapi concieve sulit (dan itu pasti bukan saya) untuk memulai. Menambahkan Dropshadow, mungkin peice kue bagi banyak dari kita, menggunakan beberapa alat editing gambar seperti Photoshop anf Fireworks dll
Alasan mengapa, saya memilih untuk drop shadow menggunakan CSS adalah bahwa, biasanya saat membuat desain halaman / html dari aplikasi, persyaratan tetap iterasi. Yang saya maksud adalah, Dalam sebuah situs web yang ada dengan banyak gambar, seperti yang menampilkan daftar freinds atau galeri gambar, maka akan sulit untuk memproses ulang seluruh beban gambar yang telah sudah dibongkar untuk menambah atau menghapus bayang-bayang, untuk itu materi.
Jadi Jika Anda telah melakukan sedikit berpikir ke depan sekaligus menciptakan HTMLs untuk menambahkan divisi tambahan atau biasanya situasi ini adalah bahwa Anda memiliki Logika loop menghasilkan ikon ini / thumbnail di XSL, PHP. JAWA atau bahasa pemrograman / script lainnya, Anda dapat menambahkan kapan saja, maka hanya soal acara dan menyembunyikan bayang-bayang menggunakan properti Tampilan CSS, sesuai dengan klien yang terus berubah persyaratan ... aku havn't dilakukan semacam ini berpikir ke depan sebelum ini ... tapi ahev mulai sekarang!

Pada contoh di bawah, gambar asli adalah bayangan bebas dan dropshadows diterapkan sesuai kebutuhan! JUGA, saya telah sedikit tambahan, dengan menggunakan trik-trik Tut saya sebelumnya (Well! ini mungkin adalah berbagai terpendek Tutorial, sehingga hanya dibenarkan menyebut mereka "Tut" 's) tentang Properti Menggunakan Klip CSS untuk memamerkan hanya

Asli Gambar

CSS DropShadow Hasil

Lihat Demo | Unduh sourcefiles

Mengapa saya ingin memahami ini? Humm ...!

Sebagian besar penulis CSS akan setuju bahwa properti Klip CSS mungkin salah satu yang paling sering digunakan un-properti CSS. Itu sangat benar bagi saya juga dan yang paling senang untuk mengabaikan hal itu, sampai aku mulai memodifikasi MooTools DUA Knob (Pin) Komponen Slider (dengan Indikator Range) .

Ada saran yang baik dari salah satu pengguna untuk memodifikasi komponen Komponen Slider menggunakan gambar backgroud terpotong (melawan sebuah divisi lebar variabel) untuk menunjukkan kisaran slider. Jadi tiba saatnya saya untuk memasuki menyenangkan tapi un-charter (untuk saya ofcourse) perairan properti Klip CSS.

Nah! betapa sulitnya bisa? Tidak sama sekali ... YA dan TIDAK. Sintaks untuk menggunakan properti Klip CSS adalah cukup tegak tapi arti / usuage sedikit croocked. Dengan memori seperti saya, setiap kali saya duduk untuk pengerjaan ulang pada Script Slider saya ... saya harus tokeep merujuk kembali ke penggunaan properti CLIP, untuk mengingatkan diri logika bahwa saya telah dibuat dalam script saya .... Oleh karena itu! diperkirakan pena ke bawah, dengan harapan untuk mengingatnya masa depan (dan juga untuk kepentingan mereka yang tampaknya boggled oleh Properti Klip CSS)

Apa Klip CSS lakukan?

Klip adalah bagian dari modul efek visual dari CSS 2.1. Secara sederhana, tugasnya adalah untuk menempatkan jendela terlihat di atas sebuah obyek yang sedang dipotong, maka kliping gambar dan membuat thumbnail tanpa harus membuat file-file tambahan (saya sudah menempatkan fitur ini untuk penggunaan yang lebih baik dalam Komponen Slider )

Menggunakan properti Klip CSS, Anda dapat membuat kliping menggunakan bentuk rect. Seperti banyak Properti CSS lainnya (seperti margin, dll padding), menggunakan rect memerlukan empat koordinat Atas, Kanan, Bawah, Kiri (TRBL). Sifat croocked properti ini mencerminkan bila anda melihat lebih dekat bagaimana klip menghitung wilayah kliping, menggunakan keempat koordinat (mengirim otak menjadi melemparkan untuk sementara waktu). Sekarang untuk membingungkan Anda bagian bawah mulai dari atas, dan kanan dimulai dari kiri. . Anda lihat apa yang saya katakan? .... Oleh karena itu posting ini ...

Ini sedikit kebingungan dapat dengan mudah menghilang, dengan penjelasan visual dari properti Klip / rect CSS seperti di bawah ini!

CSS Klip Persyaratan

Tugas kami sudah mulai adalah untuk klip gambar Miniatur berikut ke gambar persegi mencari (dan juga gambar sudut lebar)

Asli Thumbnal / Gambar	Klip Persyaratan untuk sqaure Thumbmail

CSS Klip Hasil

Lihat Demo | Unduh sourcefiles

Pertanyaan ini terlintas dalam pikiran saya beberapa kali sebelumnya, ketika saya bekerja di situs sebelumnya juga, yang digunakan untuk menunjukkan WordPress blog atau jenis baru dari konten dalam beberapa bagian dari situs / portal.Being seorang pemula dalam PHP dan sekitar Wordpress, aku terus procastinating, berpikir "ini bukan peice saya kue". Akhirnya! persyaratan ini datang upto hidungku, bila diaktifkan Diggin sekitar sedikit untuk solusi.
Saya terkejut menemukan bahwa itu benar-benar mudah daripada yang saya pikir itu sebenarnya, untuk menampilkan daftar berita atau pesan terbaru pada halaman lain di luar bagian Wordpress bertenaga, hanya menggunakan sedikit PHP dan API Wordpress .

Berikut adalah apa yang harus dilakukan: -
Untuk alasan penjelasan, menganggap bahwa situs Anda http://www.inchembur.com/ dan Anda memiliki bagian berita untuk situs ini pada http://news.inchembur.com/ (yang menjalankan Wordpress). Sekarang kebutuhannya adalah untuk menunjukkan pesan terbaru dari http://news.inchembur.com/ pada halaman home dari situs utama, yaitu http://www.inchembur.com/index.php

Langkah 1: Pada index.php tambahkan kode berikut peice, Sertakan file WordPress API. Anda dapat menambahkan ini ke bagian atas halaman yang ingin posting Anda muncul di.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES', false); / / Disbable penggunaan WordPress Theme
membutuhkan ('/ var / news.inchembur.com / wp-blog-header.php'); / / Sertakan WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Dapatkan Tulisan Terbaru
?>

Dalam peice di atas termasuk, kita hanya mendapatkan posting terbaru tunggal. jika Anda ingin mencoba variasi lebih merasa bebas untuk menggali, query_posts() dokumentasi .

Langkah 2: Sekarang, Di bagian dari halaman Index / Home di mana Anda ingin menampilkan posting terbaru dari Wordpress http://news.inchembur.com , gunakan kode berikut. Tak perlu dikatakan, jangan ragu untuk iklan Anda styling divisi, rentang dan kelas sesuai kebutuhan desain Anda.

Step3: Tidak ada Langkah 3 ... Thats it ... Anda selesai!

Bagaimana menampilkan halaman posting / spesifik yang bertentangan dengan posting terakhir: -
Ini dengan mudah dapat kita dapatkan dengan mengubah argumen untuk query_posts() untuk memasukkan ID halaman atau halaman siput

) ; query_posts ('page_id = 7');
) ; query_posts ('pagename = sekitar');

atau Anda dapat mengontrol jumlah posting:
) ; query_posts (showposts = 3);

Kadang-kadang untuk menjaga pageweight turun ... kita telah memisahkan script kami menjadi fragmen ... Fragmen javascript dapat dimuat sebagai dan bila diperlukan (pada sebuah peristiwa atau di klik link atau tombol dll).

Javascripts pemuatan dinamis sederhana dan cukup lurus ke depan seperti di bawah ini ...

= “text/javascript” > <Jenis script = "text / javascript">
fungsi loadNewScript (source) {
var s = document.createElement ('script');
s.setAttribute ('jenis', 'text / javascript');
s.setAttribute ('src', sumber);
document.body.appendChild (s);
}
</ Script>

dan Anda dapat memiliki link panggilan berikut mana saja di tubuh, atau Anda dapat memiliki script ini "onLoad" dari dokumen itu sendiri ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript ('myDynamicScript.js');"> Muat Script Dinamis </ a>

atau

<body onload="loadNewScript('myDynamicScript.js');">

Jika Anda css orang, Anda akan tahu rasa sakit dalam mendapatkan layout Anda bekerja lintas-browser. IE8 adalah satu lagi kunci pas dalam karya-karya untuk pengembang kami. Anywaz! jika Anda memukul atas masalah ini, Seperti yang saya lakukan kemarin, di mana CSS sempurna bekerja di IE7 (dan sebelumnya) dan Firefox tiba-tiba mulai melemparkan amukan di IE8, TRY ini ... Ini baik tampaknya untuk memperbaiki masalah saya untuk saat ini ....

Menggunakan deklarasi Meta, kita dapat menentukan mesin rendering kami ingin IE8 untuk digunakan. Jadi untuk memaksa IE8 untuk membuat sebagai IE7 ... Masukkan Meta Tag berikut ke dalam kepala dokumen Anda: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Secara default Meta IE akan: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
yang akan membuat IE8 membuat halaman menggunakan mode standar baru.

Jika diperlukan, sintaks ini dapat digunakan untuk mengakomodasi untuk browser lain sebagai berikut:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

LEBIH Tentang DOCTYPES:

JIKA Anda belum terbiasa dengan jenis hewan yang disebut "DOCTYPE" ... di sini adalah beberapa membaca cepat
Apa DOCTYPES? Apa BROWSER quirks mode & HUKUM?
Mengatur DOCTYPE dalam XSL

Untuk lebih dalam pemahaman mendalam tentang DOCTYPES, coba kunjungi link ini ...
A List Apart: Perbaiki Situs Anda Dengan DOCTYPE Benar!
A List Apart: Beyond DOCTYPE: Standar Web, Teruskan Kompatibilitas, dan IE8

Catatan: Meskipun banyak dari kita HTML / CSS orang telah mengabaikan pentingnya decleration DOCTYPE dalam dokumen kita, Mengatur DOCTYPE yang tepat, biasanya jawaban untuk masalah browser yang paling silang.

Dengan berbagai Carousels luar sana, banyak Mootools juga, saya masih memutuskan untuk menulis Kelas Carousel saya sendiri, untuk beberapa alasan yang baik
1. Dicari fitur paging (untuk dapat melompat slide tertentu / langkah dalam korsel).
2. Dicari kebebasan dengan penempatan tombol KIRI dan KANAN / link, di mana pun aku suka.
3. Lebih kontrol atas Langkah Slide.

Aku berhasil membuat Carousel baru, dengan fitur di atas ... seperti di bawah ini ... Jangan ragu untuk menyarankan modifikasi yang anda akan membutuhkan!

Contoh saya terlihat seperti ini ... [ View Demo ]

Lihat Demo | Unduh Mootools Carousel Dengan Pager Versi 1.0 (download 1998 kali)

1. Carousel Pager

Anda dapat dengan mudah menambahkan paging untuk korsel Anda, cukup dengan menetapkan bendera paging, yang parater terakhir lewat sekaligus menciptakan instance dari MooCarousel ke true (ingin paging) atau false (donot ingin paging).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = jumlah slide, sss = geser ukuran langkah

Dan ofcourse Anda dapat mengubah tampilan-n-merasa ini achors paging sesukamu dengan memodifikasi CSS mereka.

Carousel_paging {text-align: right; margin: 5px 10px 0 0;}.
Carousel_paging saat ini, carousel_paging halaman {outline: none; width:.... 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

Carousel_paging a: hover, carousel_paging saat ini {background: # 4D4D9B; color: # ffffff;}...

Nah! ada masalah kecil sekalipun, Jangkar paging jika diatur, maka akan mendapatkan dihasilkan selalu setelah komponen Carousel. Aku ingin membuatnya dinamis juga, tetapi kemudian hanya untuk menjaga Script untuk meniup keluar dari proporsi, saya memutuskan untuk melewati itu.
Tapi Anda tahu Javascript sedikit, Anda dapat dengan mudah memodifikasi kode generasi paging di kelas MooCarousel untuk menyenangkan kebutuhan Anda.

2. Menyesuaikan Ikon Kiri & Kanan

Anda dapat mengubah PENEMPATAN, GAMBAR atau properti displat dari Tombol Kiri dan Kanan hanya dengan bermain-main dengan CSS. untuk dapat mengubah penempatan dari buttoms Kiri dan Kanan adalah alasan sebenarnya bagi saya untuk Kelas hak kita Carousel saya.
Karena ini Kelas MooCarousel, menerima id itu tombol ini, Anda sebenarnya dapat menempatkan tombol-tombol mana saja di halaman, jika Anda silahkan ... tidak harus dalam hirarki elemen, seperti dalam contoh saya.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; width: 23px; height: 20px; float: left; kursor: pointer;}

Carousel_container_r {background-position: 0-38px;}.

Carousel_container_l {background-position: 0-58px;}.

3. Menyesuaikan Langkah Slide

APA SAYA BERARTI LANGKAH Menyesuaikan SAYA SLIDE?
Carousels paling geser penuh dengan dari jendela terlihat. Jadi katakanlah Anda memiliki empat item (seperti dalam contoh saya di atas), akan geser semua empat item. Dengan Komponen Carousel, Anda melewati jumlah slide dan ukuran langkah pilihan Anda.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = jumlah slide, c_sss = geser ukuran langkah

Juga, dalam example1 saya, saya telah calcuted ukuran langkah slide, berdasarkan logika mana, aku tahu jumlah item, lebar pada setiap item dan margin yang diberikan setelah setiap item dalam CSS saya.

/ * Untuk korsel 1 * /

var c1_w = 92; Lebar / / korsel Barang

var c1_n = 10; Nomor / / Total Items korsel Perbandingan

var c1_pp = 4 / / Jumlah perpage Perbandingan Produk korsel

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / sss = geser ukuran langkah

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + .5); / / ns = jumlah slide

c1_sss + = c1_marginFactor; / / sss = geser ukuran langkah, 51 untuk margin

Persyaratan: Mootools 1,2

Lihat Demo | Unduh Mootools Carousel Dengan Pager Versi 1.0 (download 1998 kali)

Mootools MooRating adalah (cross browser, tentu saja karena menggunakan kekuatan perpustakaan MooTools) sederhana, ringan dan sangat baik solusi berbasis peringkat. Hal ini tidak disebut sebagai "Bintang", hanya karena, citra Peringkat bisa sama yang Anda pilih (saya berikan Stars, Bar dan Hati dengan download, tapi Anda dapat membuat berbagai Anda sendiri dan hanya drop dalam).

Bagaimana hal itu terlihat seperti:

	Penilaian Mootools dengan gambar yang berbeda Lihat Demo
	Penilaian Mootools dengan nilai-nilai Persentase Lihat Demo
	Penilaian Mootools dengan nilai pecahan Lihat Demo

Unduh Mootols Star Rating Script (download 720 kali)

Penilaian data: Jumlah Utuh, Desimal atau Persentase
Saat ini script dirancang untuk menampilkan data rating sebagai nilai keseluruhan (1,2,3,4,5), dalam desimal (1,24, 3,45 dll) atau dalam persentase (12%, dll 55%). Pilihan untuk menampilkan data dalam format apapun yang disebutkan dapat diatur hanya dengan mengubah nilai beberapa bendera dalam javascript (moorating.js)
Pada dasarnya ada dua e dua bendera untuk bermain dengan, untuk menampilkan nilai-nilai dalam format pilihan Anda ...

var inpercent = false; / / Set bendera ini menjadi true, jika Anda memerlukan nilai-nilai persentase yang akan ditampilkan
var isFractional = false / / Set ini menjadi true, jika Anda ingin nilai pecahan seperti 1,24, 1,25 4,56 daripada 1,2 ... 5

Dan saya tidak berpikir ada penjelasan yang diperlukan untuk ini. Selain itu. Script ini sangat sederhana. Jika Anda tahu javascripting sedikit, Anda bisa memodifikasi script untuk mendapatkan semacam nilai yang ditampilkan. Untuk misalnya jika Anda ingin tiga tempat desimal untuk ditampilkan ... hanya men-tweak script seperti di bawah ini ...

if (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3);.} / / 2 diubah menjadi 3
else {moostartval [i] innerHTML = Math.round (x).;

Memperbarui Nilai Rating:
I havent repot menulis script AJAX untuk memperbarui nilai Ratings, karena saya tahu dari pengalaman saya yang TIDAK SELALU melakukannya berniat untuk memperbarui PENILAIAN segera sebagai sesuatu tingkat pengguna. Anda bebas untuk melakukan apapun yang Anda inginkan dengan nilai dinilai, Update menggunakan AJAX atau Menyerahkan atau Atur seting bentuk field tersembunyi, untuk disampaikan dengan seluruh formulir dll

fungsi updateRating (id, rating) {
/ / Alert (id + "," + rating);
/ / DO APA PUN DENGAN PENILAIAN ATAS
}

Ada fungsi dalam javascript disebut "updateRating". Fungsi ini telah lulus ID dari Div Penilaian, untuk mengidentifikasi untuk yang peringkat (jika ada lebih dari satu peringkat pada halaman) telah diupdate dan nilai rating [updateRating (id, rating)]. Anda bisa memilih untuk apa pun yang Anda inginkan dengan nilai-nilai ini, sebagai i disebutkan sebelumnya.

Penilaian Gambar: Bintang, Hearts, Bar atau apapun yang Anda silahkan
Mengubah rating untuk setiap jenis di atas (bintang, hati dll) sangat sederhana. Hanya membuat gambar yang mirip dengan yang disediakan dan menjatuhkannya masuk Ingat, jika Anda mengubah nama gambar, jangan membuat perubahan yang diperlukan dalam file CSS, lihat di bawah.

Moostar {margin: 0px; padding: 0px; overflow: hidden; width: 84px; height: 20px; float: left; background: url ('stars.gif') repeat-x;}.
Moostar span {float: left; margin: 0px; padding: 0px; display: block; width: 84px; height: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}.
.. Moostar Curr {background: url ('stars.gif') meninggalkan 25px;}

Kebanyakan peringkat widget menggunakan bintang-bintang dan setengah gambar dengan mouse kegiatan untuk setiap bintang. Ratings Moo menggunakan gambar sprite sederhana seperti gambar latar belakang untuk mencapai efek visual yang diperlukan dengan overhead yang sangat rendah.

Persyaratan: Mootools 1,2
Unduh Mootols Star Rating Script (download 720 kali)

Di Firefox ... kadang-kadang Anda mungkin telah memperhatikan bahwa kursor akan berkedip di layar. Mungkin terjadi ketika Anda mengklik pada setiap elemen pada halaman, sebuah divisi atau gambar dll kursor berkedip di jendela browser sebenarnya merupakan Fitur AKSESIBILITAS FireFox disebut 'tanda sisipan Browsing'. Fitur ini memungkinkan / memungkinkan pengguna untuk memilih teks pada halaman dengan keyboard (yang biasanya kita cenderung melakukan dengan menggunakan mouse kita).

Nah! jika Anda ingin donot fitur ini ... tekan sederhana "F7" untuk beralih ke palsu dan sebaliknya (jika Anda menginginkannya ON). Anda juga dapat mengetikkan "about: config" pada address bar (ketik "tanda sisipan" di kotak filter) dan klik dua kali untuk mengubah opsi "accessibility.browsewithcaret" dari "benar" (berbalik tanda sisipan yang sedang berada ON) adalah "false "(berbalik tanda sisipan yang sedang berada OFF)

Saya telah mencari slider disematkan ganda (slider dengan dua tombol, minimum dan maksimum) menggunakan mootools. Padahal, aku menemukan slider ganda disematkan beberapa baik dilakukan dalam forum Mootools, satunya masalah adalah bahwa semua berkat slider memiliki penanda jarak yang dipilih. Akhirnya! Saya memutuskan untuk membuat sendiri. Nah! Saya tidak menggunakan kode asli dan memodifikasi untuk memiliki latar belakang slider yang menunjukkan rentang yang dipilih secara visual, seperti dalam contoh saya di bawah ini. Daerah BIRU menunjukkan kisaran nilai yang dipilih.

Lihat Versi 2.2 Demo | Unduh Mootools ganda Pinned Versi Slider 2.2 (download 11864 kali)

Anda dapat dengan mudah mengubah tampilan dan nuansa dari berbagai indikator (warna biru pada contoh di atas), tombol slider, lagu slider dengan memodifikasi slider.css seperti yang diperlukan.

Jangan drop me komentar jika Anda merasa berguna.

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 452 kali)

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

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 452 kali) .. untuk dimengerti, CSS ini belum dioptimalkan

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