Väljendades IT

Enne oli meil tegeleda CSS luua meie lehe paigutusega, viies mõned sisu sees tabeli lahtrisse tundus lihtsalt lapsemäng. Lihtsalt määrata "align" või "valign" vara tabelis on lähendada oma valiku, käkitegu!
CSS paigutust, kuigi meil on "vertikaalselt joondada" vara elemente, ei tundu olevat sama lihtne kui "viia" või "valign" omadused. Rohkem specifiic "vertikaalselt joondada" ei tundu, et lahendada kõik oma probleemid, eriti kui on kirjutada tükk piiriülese brauser CSS.

Ei kasutata HTML Lauad, probleem keskendudes objekt, olgu see siis pilt või mõni teksti sisaldavate rajoonis on ilmselt olnud iga UI / CSS arendajatele õudusunenägu mingil ajahetkel. See probleem veelgi ekstrapoleeritakse oma mured viia, kui objekti keskele on dünaamilise iseloomuga, st kui selle kõrgus on muutuv (teadmata kõrgus).

Kuigi ei ole teada, otse edasi, lahendus, mis teeks kogu valik brausereid peame tegelema, lahendus, et olen püüdnud jõuda ei tundu töötada mõned brauserid, et olen püüdnud seda (IE6, IE 7 , FF).

LAHENDUS:
Brauserites nagu Mozilla, Opera ja Safari, kummaline käituvad "vertikaalselt joondada" vara on võimalik tuua oma meeli, lihtsalt seades "Display" vara sisaldava rajoon "table-cell" (display: table-cell) .

Probleem endiselt IE pere brauserid, kes veel ei paista aru, mida koos "table-cell" vara ja asjatundmatu nagu nad on, nad lihtsalt ignoreerida. Lahendus toodud allpool, kuigi lihtne, reklaame veel paar DOM elemente oma HTML teha asju juhtuda.

CSS ja HTML näeb välja selline
.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/> Vaadatud: 3456 </ div>
</ Div>
</ Div>

Tulemus näeb välja selline: -

vaadata demo siin | Download Source Files (laetud 452 korda)

---

Mõistmise lahendus:
Sest brauserid et mõista kuva: laud ja ekraan: table-cell omadused, seda harva vaja mingeid selgitusi. IE, kasutades IE spetsiifiliste hack (hash hack), me absoluutselt positsioneerida objekti konteiner (obj_container) poole olemasolevast kõrgus. Siis objekti (obj) jooksul on positsioon suhteliselt ja liigub üles poole tema kõrgusest ... Noh! Mulle tundub, et mõista ilme näole, kuid see toimib. Proovi seda!
Eespool nimetatud meetodeid kombineerida, et anda meile üle rist brauser lahendus.

---

CSS saab kergesti allpool modifitseeritud saavutada, vertikaal-align: top või vertikaalne-align: alumine

TOP joondamine 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/> Vaadatud: 1234 </ div>
</ Div>
</ Div>

Tulemus näeb välja selline: -

BOTTOM joondamine 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/> Vaadatud: 1234 </ div>
</ Div>
</ Div>

Tulemus näeb välja selline: -

vaadata demo siin | Lae alla siit

---

Horisontaalne keskele objekti lihtsalt saavutada varu vara, kehtestades margin-left ja margin-right to auto

Tundub vanuses, sest ma üritasin leida mõistlik lahendus sellele viimine probleemi. Aga nüüd on see lahendus, tunnen pisut rahu.

Mis lootust, et ühel päeval

• vertikaal-viimine vara CSS töötab nagu see sees tabeli lahtrisse, ilma võita palju ümber bush
• Vähemalt, milles margin-top: auto ja margin-bottom: auto, mis annab sama tulemuse nagu margin-left ja margin-right seatud auto
• Browser sõda on möödas ühel päeval.
• Seal peavad lihtsalt üks brauser jaoks KÕIK.

Lae CSS ja HTML eespool lahendus siin (laetud 452 korda) .. ja arusaadavus, CSS ei ole optimeeritud

PS: Ja muide, need on pisipildid mõned pildid olen klõpsatud ...