Vyjádření IT

Další rychlá tut. Tady je něco jednoduché a příjemné použití síly CSS ... ale bylo obtížné pojmout (a to určitě nebyl já) začít. Přidání Dropshadow, může být peice dortu pro mnohé z nás, používat některé nástroje pro úpravu obrazu, jako Photoshop ANF ohňostrojů atd.
Důvod, proč jsem se rozhodla pro stínu pomocí CSS je, že obvykle při vytváření stránky design / html žádosti, aby požadavky iterace. Co chci říct je, Ve stávající webové stránky s mnoha obrázky, jako jsou ty, zobrazující freinds seznam nebo galerii obrazu, to bude těžké znovu zpracovat celý zatížení obrázků, které již byly vyloženy přidat nebo odebrat stíny, pro které záležitost.
Takže pokud jste udělali trochu myslí dopředu a vytvořili HTMLS přidat tyto další divize, nebo se obvykle situace taková, že máte Loop Logic generující tyto ikony / náhledy v XSL, PHP. JAVA nebo jakékoliv jiné programovací / skriptovací jazyk, můžete jej přidat kdykoliv, pak je jen otázkou show a skrývá tyto stíny pomocí CSS vlastnost Display, jak na klienty, stále se měnící požadavky na ... Ještě ses udělal jsem tento druh myslí dopředu před tím ... ale ahev začala nyní!

V níže uvedeném příkladu, původní obrázek stínu zdarma a dropshadows jsou použity podle potřeby! Také jsem šel něco navíc, pomocí triků z mých dřívějších Tutanchamona v Well! to asi jsou nejkratší řadu cvičení, tak to je oprávněná pouze tehdy, volat je "Tut" 'y) k použití CSS vlastnost klip pro předvést pouze

Původní obraz

CSS DropShadow Výsledky

Zobrazit Demo záložky | Stáhnout sourcefiles

Proč chci to pochopit?? Humm ...!!

Většina spisovatelů CSS by se shodují, že CSS vlastnost Clip je pravděpodobně jedním z nejvíce un-používané vlastnosti CSS. Bylo to tak i můj případ a byl nejvíce šťastný, že zanedbávat to, dokud jsem začal úpravou Mootools TWO Knob (PIN) Slider komponenty (s přecházejícím Indicator) .

Tam byl dobrý návrh od jednoho z dílčích uživatelů upravit pomocí komponenty Slider připnutý zázemí obrázků (proti proměnnou šířku divize), což znamená posuvník rozsah. Tak přišel můj čas vstoupit na zábavu, ale ne-znalce (Samozřejmě pro mě) vody z majetku Galerie CSS.

No! jak těžké to může být? Nic moc ... ano i ne. Syntaxe clip CSS vlastnost je dost vzpřímené, ale význam / usuage je trochu croocked. S pamětí jako já, pokaždé sedím přepracovat na mém Slider Script ... Mám tokeep odkazuje zpět na použití tohoto majetku CLIP, připomněl sám sobě logiku, které jsem vytvořil ve svém skriptu .... Proto! myšlenka pera dolů, s nadějí, jak si pamatovat, že budoucnost (a také ve prospěch těch, kteří se zdají boggled v majetku Galerie CSS)

Co CSS klip dělat?

Klip je součástí vizuálních efektů modulu CSS 2.1. Jednoduše řečeno, jeho úkolem je umístit viditelné okno v horní části objektu, který je připnutý, tedy oříznutí snímků a vytváření náhledů bez nutnosti vytvářet další soubory v již jsem dal tuto funkci k lepšímu využití v komponentě Slider )

Pomocí vlastnosti Clip CSS, můžete vytvořit výstřižek pomocí tvar rect. Jako mnoho jiných vlastností CSS (jako okraj, zateplení atd.), za použití rect vyžaduje čtyři souřadnice nahoře, vpravo, dole, vlevo (TRBL). Croocked povaha tohoto majetku odpovídá, když se blíže podívat na to, jak klip vypočítává ořezovou oblast, používat tyto čtyři souřadnice (vysílá mozek do hoďte na chvíli). Nyní se zmást dole začíná od horní a pravý začíná zleva. . Vidíš, co jsem řekl? .... Proto tento příspěvek ...

Tento malý zmatek může snadno zmizet, s tímto vysvětlením vizuální CSS Galerie / rect majetku, který je níže!!

CSS Clip Požadavky

Úkol jsme začali, je klip na následující miniatury do hranatější hledá obrazu (a také širokoúhlý obraz)

Původní Thumbnal / Image	Clip Požadavky na řadové Thumbmail

CSS Clip Výsledky

Zobrazit Demo záložky | Stáhnout sourcefiles

Tato otázka mě napadlo několikrát předtím, když jsem pracoval na stránkách dříve příliš, který používá WordPress ukázat, blogy nebo nový druh obsahu v některé části stránek / portal.Being nováčka v PHP a kolem WordPress, jsem si procastinating to, myslet "to není můj peice dortu". Konečně! tento požadavek přišel až pro můj nos, když začal Diggin asi trochu na řešení.
Byl jsem překvapen, že to opravdu bylo jednodušší, než jsem si myslel, že to ve skutečnosti bylo, se zobrazí seznam titulků nebo poslední příspěvek v jakékoliv jiné straně mimo WordPress pohonem části jen pomocí trochu PHP a WordPress API .

Zde je to, co dělat: -
Z důvodu vysvětlení, předpokládat, že vaše stránky jsou http://www.inchembur.com/ a máte sekci Novinky pro tuto stránku na http://news.inchembur.com/~~pobj (který běží WordPress). Nyní požadavek je ukázat poslední příspěvek od http://news.inchembur.com/~~pobj na domovské stránce hlavní stránky, tedy http://www.inchembur.com/index.php

Krok 1: Ve vašem index.php přidejte následující peice kódu, patří WordPress API souboru. Můžete přidat na začátek stránky chcete, aby váš příspěvek zobrazovat.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES ", false); / / Disbable využití WordPress Téma
require ('/ var / news.inchembur.com / wp-blog-header.php'), / / Zahrnout WordPress API
; // Get Latest Post query_posts ("showposts = 1 '), / / Získání poslední příspěvek
>

Ve výše uvedeném peice o patří, jsme stále jen jeden poslední příspěvek. Pokud si chcete vyzkoušet více variant, neváhejte a kopat do, query_posts() dokumentaci .

Krok 2: Nyní, v části Index / Domovská stránka, kde chcete zobrazit poslední WordPress příspěvek od http://news.inchembur.com , použijte následující kód. Netřeba dodávat, neváhejte reklamu své stylové divize, rozpětí a třídy podle vašich potřeb designu.

Krok 3: Není Krok 3 ... A je to ... je hotovo!

Jak zobrazit konkrétní příspěvek / stránku na rozdíl od poslední příspěvek: -
To lze snadno achived změnou argumenty query_posts() , aby zahrnovala stránky ID nebo stránky Slug

) ; query_posts ("page_id = 7 ');
) ; query_posts ("pagename = o ');

nebo můžete nastavit počet příspěvků:
) ; query_posts odst. showposts = 3);

Někdy, aby pageweight dolů ... jsme rozdělili naše skripty na kousky ... Tyto fragmenty javascriptu lze načíst podle potřeby (na události nebo kliknutím na odkaz nebo tlačítko apod.).

Nahrávám JavaScripty dynamicky je jednoduchá a docela rovně vpřed níže ...

= “text/javascript” > <Script type = "text / javascript">
Funkce loadNewScript (zdroj) {
var s = document.createElement ('script');
s.setAttribute ("typ", "text / javascript");
s.setAttribute ("src", zdroj);
document.body.appendChild (y);
}
</ Script>

a můžete mít následující odkaz hovoru kdekoli v těle, nebo můžete mít tento skript "onLoad" dokumentu samotného ...

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

nebo

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

Jste-li osoba, CSS, měli byste vědět, jak se vaše bolest v rozvržení pracovní cross-browser. IE8 je další klíč v pracích pro nás vývojáři. Anywaz! Pokud narazíte na tento problém, jako jsem to udělal včera, kde si dokonale fungující CSS v IE7 (a dříve) a Firefox se náhle začali házet záchvaty vzteku v IE8, zkuste toto ... Je hezky vypadalo opravit své problémy na chvíli ....

Pomocí Meta prohlášení, můžeme specifikovat vykreslovací jádro IE8 bychom chtěli použít. Takže nutit k tomu, jak je IE8 IE7 ... vložte následující značku metadat do hlavy dokumentu: -

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

Ve výchozím nastavení IE Meta bude: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
který by IE8 zobrazení stránky pomocí nové normy režimu.

V případě potřeby lze tuto syntaxi použít k ubytovat u jiných prohlížečů jak je uvedeno níže:

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

VÍCE O DOCTYPES:

POKUD jsi ještě neznají druh zvířete zvané "doctype" ... tady je nějaká rychlá číst
Co jsou DOCTYPES? Co to ​​jsou internetové Quirks a Přísný režim?
Nastavení DOCTYPE v XSL

Pro podrobnější pochopení, DOCTYPES, zkuste navštívit tyto odkazy ...
Seznam APT: Fix vaše stránky Se správným DOCTYPE!
Seznam APT: Beyond DOCTYPE: Webové standardy a dopřednou kompatibilitu, a IE8

Poznámka: I když mnozí z nás HTML / CSS lidé byli zanedbávání význam DOCTYPE decleration v našich dokumentech, nastavení správného DOCTYPE, je obvykle odpovědí na většinu otázek příčných prohlížeči.

S různými kolotoče venku, mnoho pro Mootools také, pořád se rozhodl napsat vlastní Carousel třídy, pro některé z dobrých důvodů
1. Chtěl stránkovací funkce (mohli skočit konkrétní snímek / krok v karuselu).
2. Chtěli svobodu, umístění na levý a pravý tlačítka či odkazy, kde vůbec se mi zlíbí.
3. Větší kontrolu nad Slide schodů.

Já se podařilo vytvořit nový Carousel, s výše uvedenými funkcemi ... jak je uvedeno níže ... Nebojte se navrhnout nějaké změny byste vyžadovat!

Můj Příklad vypadá takto ... [ View Demo ]

Zobrazit Demo záložky | Stáhnout Mootools Carousel S stránkovacího verze 1.0 (staženo 2001 krát)

1. Kolotoč Paging

Můžete snadno přidat stránkování do kolotoče, jednoduše nastavením stránkovací vlajku, což je poslední parater prošel při vytváření instance MooCarousel na hodnotu true (chcete stránkovací) nebo false (donot chce stránkování).

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright" c_ns, c_sss, true); / / ns = počet snímků, sss = snímek velikost kroku

A samozřejmě můžete změnit vzhled-n-styl těchto vyhledávacích achors, jak je libo úpravou jejich CSS.

. Carousel_paging {text-align: právo; margin: 5px 10px 0 0;}
. Carousel_paging proud, carousel_paging stránku {outline: none; šířka: týden. 15px, výška: 15px; line-height: 15px; text-align: centrum; display: block; float: left; pozadí: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging: hover, carousel_paging proud {background: # 4D4D9B, color: # FFFFFF;}..

No! tam je malý problém když, pokud je nastavena, stránkovací kotvy pak to dostane generován vždy po Carousel komponenty. Chtěl jsem, aby to dynamický také, ale pak už jen, aby scénář k foukání rozměrů, rozhodl jsem se ji přeskočit.
Ale víte, trochu Javascript, můžete snadno upravit stránkovací generace kód v MooCarousel třídě potěšit své potřeby.

2. Přizpůsobení levý a pravý ikony

Můžete změnit umístění, obrázky ani displat majetek z levého a pravého tlačítka jednoduše tím, že hraní si s CSS. mít možnost změnit umístění mezi levým a pravým PŘIVOLÁVAČE byl skutečný důvod, abych na pravou mé naší Carousel třídy.
Vzhledem k tomu, MooCarousel třídy, přijme id je z těchto tlačítek, můžete skutečně umístit tato tlačítka kdekoliv na stránce, prosím ... to nemusí být v hierarchii prvků, jako v mém příkladu.

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; pozice: relativní, šířka: 23px; výška: 20px; float: left; cursor: pointer;}

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

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

3. Přizpůsobení snímků kroky

Co tím myslím MOJE Přizpůsobení snímků kroky?
Většina Kolotoč posuňte plně s z viditelného okna. Takže říct, že měl čtyři položky (jako v mém vzorku výše), bude to klouzat všechny čtyři položky. S tímto Carousel Component, minete několik snímků a velikost kroku dle vašeho výběru.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright" c_ns, c_sss, true);
c_ns = počet snímků, c_sss = snímek velikost kroku

Také v mém example1 jsem calcuted prezentaci velikost kroku, založený na logice kde, vím, že počet položek, šířka na každé položky a marží, které dali za každou položkou v mém CSS.

/ * Pro pitka 1 * /

var c1_w = 92 / / pitka položky Šířka

var c1_n = 10 / / Celkový počet položek porovnávané pitka

var c1_pp = 4 / / Počet porovnávané perpage pitka položky

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = snímek velikost kroku

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5) / / ns = počet snímků

c1_sss + = c1_marginFactor, / / ​​sss = snímek velikost kroku, 51 pro okraje

Požadavky: Mootools 1.2

Zobrazit Demo záložky | Stáhnout Mootools Carousel S stránkovacího verze 1.0 (staženo 2001 krát)

MooRating je jednoduchý (cross prohlížeč, samozřejmě, protože využívá síly knihovny Mootools), lehké a vynikající Mootools podle hodnocení řešení. To není pojmenován jako "hvězdiček", prostě proto, že by hodnocení obrázek, jak si vybrat (já jsem za předpokladu, hvězdičky, bary a srdce ke stažení, ale můžete vytvořit vlastní paletu a nech ho).

Jak to vypadá takto:

	Mootools hodnocení s různými obrázky Zobrazit ukázku
	Mootools hodnocení s procentuální hodnoty Zobrazit ukázku
	Mootools hodnocení s hodnotami nepatrné Zobrazit ukázku

Stáhnout Mootols é Script (Staženo 722 krát)

Hodnocení údaje: celé číslo, desetinné nebo procento
V současné době skript je navržen tak, aby ratingové zobrazit data jako celek hodnot (1,2,3,4,5), v desetinná místa (1,24, 3,45 atd.), nebo v procentech (12%, 55% atd.). Volba pro zobrazení dat v jednom z uvedených formátů lze nastavit jednoduše tím, že se mění některé vlajky hodnot v JavaScriptu (moorating.js)
V zásadě existují dva e dvě vlajky na hraní, pro zobrazení hodnoty ve formátu dle vašeho výběru ...

var inpercent = false; / / Nastavení tohoto příznaku na hodnotu true, pokud potřebujete procentuální hodnoty, které se zobrazí
var isFractional = false / / Nastavte na hodnotu true, pokud chcete nepatrné hodnoty, jako jsou 1,24, 1,25 a 4,56, spíše než 1,2 ... 5

I dont myslím, že je zapotřebí nějaké vysvětlení pro to. Kromě toho. Skript je velmi jednoduchý. Pokud víte, trochu javascripting, můžete upravit skript dostat jakoukoli hodnotu zobrazenou. Pro např. pokud byste chtěli tři desetinná místa mají být zobrazeny, ... prostě poupravit skript níže ...

if (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] = innerHTML FormatNumber (x, 3);.} / / 2 se mění na 3
else {moostartval [i] = innerHTML Math.round (x).;

Aktualizace Hodnocení hodnota:
I havent obtěžoval psát nějaké AJAX skripty pro aktualizaci ratingů hodnotu, protože vím z vlastní zkušenosti, že ne vždy se to v úmyslu aktualizovat RATING jakmile uživatel sazeb něco. Můžete si dělat, co chcete s jmenovitou hodnotou, aktualizovat jej pomocí AJAX nebo jej nastavit nebo skryté pole formuláře hodnotu, která má být předložena s celou formou atd.

Funkce updateRating (id, hodnocení) {
/ / Alert (id + "," + hodnocení);
/ / Dělej si, co s hodnocením
}

K dispozici je funkce v javascriptu názvem "updateRating". Tato funkce se usnesl na identifikátor Hodnocení Div, zjistit, jaké hodnocení (pokud existuje více než jedna hodnocení na stránce) byl aktualizován a hodnota ratingu [updateRating (id, hodnocení)]. Dalo by se rozhodnout, co chcete s těmito hodnotami, jak jsem již zmínil.

Hodnocení Obrázek: hvězdy, srdce, bary nebo něco prosím
Změna hodnocení na některou z výše uvedených typů (hvězdy, srdce atd.) je velmi jednoduché. Stačí vytvořit obraz podobný tomu, pokud jeden a umístěte jej dovnitř Pamatujte, že pokud změníte název obrazu, se provést nezbytné změny v souboru CSS, viz níže.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; šířka: 84px; výška: 20px; float: left; background: url ("stars.gif") repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; šířka: 84px; výška: 20px; text-decoration: none; text-indent:-9000px, z-index: 20;}
.. Moostar akt. {background: url ("stars.gif") odešel 25px;}

Většina hodnocení widgety používat hvězdu a půl hvězdičkami obrazy s myší nad událostmi na každé hvězdy. Moo hodnocení používá jednoduchý skřítka obrázek jako obrázek na pozadí, aby bylo dosaženo požadované vizuální efekty s velmi nízkou zátěží.

Požadavky: Mootools 1.2
Stáhnout Mootols é Script (Staženo 722 krát)

V prohlížeči Firefox ... Někdy jste si možná všimli, že začne blikat kurzor na obrazovce. To se může stát, když kliknete na libovolný prvek na stránce, rozdělení nebo obraz atd. To blikající kurzor v okně prohlížeče je vlastně DOSTUPNOST funkcí Firefoxu názvem "vsuvka prohlížení". Tato funkce umožňuje / umožňuje uživatelům vybrat text na stránce pomocí klávesnice (které obvykle mají tendenci dělat s použitím našeho myši).

No! Pokud si chcete tuto funkci donot ... jednoduše stiskněte "F7" pro přepnutí do falešné a naopak (chcete-li ji ON). Dalo by se také napsat "about: config" do adresního řádku (typ "stříška" v kolonce filtru) a jednoduše dvojitým kliknutím změnit volbu "accessibility.browsewithcaret" z "true" (zase stříška procházení ON) na "false "(zase stříška procházení OFF)

Jsem hledal dvojí připnutý Posuvník (jezdec se dvěma knoflíky, minimální a maximální) pomocí Mootools. I když, našel jsem pár dobře odvedenou dvojitý jezdec připnutý na fóru Mootools, jediný problém byl, že všechny tyto posuvníky dint se vybrané dosahu. Konečně! Jsem se rozhodl vytvořit svůj vlastní. No! Jsem použít původní kód a upravit ji mít jezdec pozadí, které je uvedeno rozmezí vybrané vizuálně, jako v mém příkladu. Modré oblasti udává rozsah hodnot zvolili.

Zobrazit Demo verze 2.2 | Download Mootools Double Čepové a kolíkové Slider verze 2.2 (staženo 11929 krát)

Můžete velmi snadno změnit vzhled a dojem z řady ukazatele (modře ve výše uvedeném příkladu), slider knoflík, posuvník trať změnou slider.css podle potřeby.

Líbí se napište mi komentář, pokud vám to užitečné.

Než jsme se museli vypořádat s CSS vytvořit naše rozložení stránky, zarovnání nějaký obsah uvnitř buňky tabulky zdálo Prostě hračkou. Stačí zadat "sladit" nebo "valign" vlastnost tabulky mají zarovnání podle vašeho výběru, kousek dortu!
S rozvržení CSS, když máme "vertical-align" vlastnost prvků, se nezdá být tak jednoduché, jak "sladit" nebo "valign" vlastností. Chcete být více konkrétni "vertical-align" nikdy se zdá k řešení některý z vašich problémů, zejména pokud jsou napsat kus cross-browser CSS.

Bez použití HTML tabulek, problém se soustředit na objektu, ať už je to nějaký obrázek nebo text v obsahující divize, byl pravděpodobně každý UI / CSS vývojáři noční můra, na nějakém místě. Tento problém dále extrapoluje své starosti v přizpůsobení, je-li objekt, který se uprostřed je dynamický charakter, tj. když jeho výška je proměnlivá (neznámé výška).

Ačkoli neexistuje žádná známá přímočaré řešení, které bude pracovat v celé řadě prohlížečů, které musíme řešit, řešení, které jsem se snažil přijít k se zdá pracovat v několika prohlížečích, které jsem se snažil ho (IE6, IE 7 , FF).

ŘEŠENÍ:
V prohlížečích, jako je Mozilla, Opera a Safari divně chová "vertical-align" majetek může být podána k rozumu, jednoduše nastavením "display" vlastnost obsahující divize "stolní buňky" (display: table-cell) .

Problémem stále zůstává s IE rodiny prohlížečů, který, ale nezdá se, že pochopili, co mají s "table-cell" majetku a nevědomým, jak jsou, prostě ignorovat. Řešení uvedeny níže, byť jednoduchý, inzeráty několika více DOM elementy do HTML dělat věci se stávají.

CSS a HTML vypadá takto
.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/> zobrazení: 3456 </ div>
</ Div>
</ Div>

Výsledek vypadá takto: -

Podívejte se na demo zde záložky | ke stažení Zdrojové soubory (staženo 454 krát)

TOP Zarovnání 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/> zobrazení: 1234 </ div>
</ Div>
</ Div>

Výsledek vypadá takto: -

SPODNÍ Zarovnání 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/> zobrazení: 1234 </ div>
</ Div>
</ Div>

Výsledek vypadá takto: -

Podívejte se na demo zde | Ke stažení zde

Vypadá to, že stárne, protože jsem se snažil najít rozumné řešení tohoto problému zarovnání. Ale teď s tímto řešením, se cítím trochu klidu.

S nadějí, že jednoho dne

• Vertikální zarovnání CSS majetek bude fungovat podobně jako to dělá uvnitř buňky tabulky, aniž by museli porazit mnohem kolem horké kaše
• Alespoň, nastavení margin-top: auto a margin-bottom: auto, dá stejného výsledku jako u margin-left a margin-right nastaven na automatické
• Válce prohlížečů bude po nějaký den.
• K dispozici bude pouze jeden prohlížeč pro všechny.

Stáhněte si CSS a HTML výše uvedené řešení zde (staženo 454 krát) .. na srozumitelnosti, je CSS není optimalizována

PS: A mimochodem, to jsou náhledy některých obrázků jsem klikli ...