Ki ga izraža

Preden smo se morali ukvarjati z CSS, da ustvarite svoje postavitve strani, uskladi nekaj vsebine znotraj celice tabele zdelo Preprosto otroška igra. Preprosto nastavite "uskladiti" ali "valign" premoženje v tabeli, da imajo s poravnavo po vaši izbiri, kos torte!
Pri postavitvah CSS, čeprav imamo "navpično poravnati" premoženje za elemente, se ne zdi, da je tako enostavno, kot "uskladiti" ali "valign" lastnostmi. Če želite biti bolj specifiic "navpično poravnati" nikoli ne zdi, da reši vse vaše težave, še posebej, če so napisali kos CSS navzkrižno brskalnika.

Brez uporabe HTML tabel, problem centriranje na objektu, naj bo to slika ali del besedila, ki vsebuje v oddelku, je verjetno že vsak UI / CSS razvijalci nočna mora na neki točki. Ta problem še extrapolates na skrbi za poravnavo, če je predmet, ki se centered je dinamičen v naravi, to je, če je njegova višina je spremenljiva (neznano višina).

Čeprav ni znano, naravnost naprej rešitev, ki bi deloval po različnih brskalnikih, jih moramo obravnavati, je rešitev, da sem poskušal priti do ne zdi, da dela v nekaj brskalnikov, ki sem jo poskušala v (IE6, IE 7 , FF).

REŠITEV:
V brskalnikih, kot so Mozilla, ki Opera in Safari, ki čudno obnaša "navpično poravnati" premoženje je mogoče vložiti na svoje čute, le z nastavitvijo "Display" last vsebujejo delitev na "namizni celice" (zaslon: table-cell) .

Problem še vedno ostaja v IE družine brskalnikov, ki še ne zdi, da jasno, kaj morajo s "tabela celic" premoženje in ne poznajo, saj so, samo prezreti. Rešitev je navedeno spodaj, čeprav preprostih, oglasov nekaj več elementov DOM v vašem HTML, da bi se stvari zgodijo.

CSS in HTML izgleda takole
.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/> ogledov: 3456 </ p>
</ P>
</ P>

Rezultat izgleda takole: -

ogled demo tukaj plinov v prenosu izvorne datoteke (Downloaded 452 krat)

---

Razumevanje rešitev:
Za brskalnike, ki razumejo zaslon: tabel in prikaz: miza-celične lastnosti, je le redko potrebuje nobene razlage. Za IE, z uporabo IE poseben kramp (hash kramp), smo absolutno postaviti element posodo (obj_container) na polovici razpoložljivega višino. Nato predmet (obj) v položaj je relativno in se premakne navzgor za polovico njegove višine ... No! Zdi se mi, da razumejo pogled na obrazu, vendar deluje. Poskusite!
Zgoraj navedene metode so združene, da nam čez zgornjo rešitev brskalnika.

---

CSS se lahko enostavno spremeni v nadaljevanju doseči, vertikalno-align: top ali navpično-align: bottom

TOP Poravnava 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/> pogledov: 1234 </ p>
</ P>
</ P>

Rezultat izgleda takole: -

BOTTOM Poravnava 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/> pogledov: 1234 </ p>
</ P>
</ P>

Rezultat izgleda takole: -

ogled demo tukaj | Download tukaj

---

Horizontalno centriranje predmeta preprosto doseči s kritjem, lastnine, z nastavitvijo margin-levo in desno, da margin-auto

Izgleda, starosti, ker sem poskušal najti razumno rešitev za ta problem usklajevanja. Ampak sedaj s to rešitvijo, počutim se malo na miru.

Z upanjem, da nekega dne

• navpična poravnava, premoženje, CSS bo delovala tako kot to počne znotraj celice tabele, ne da bi veliko v bližini grmovja
• Najmanj, v katerem margin-top: avto in margin-bottom: avto bo, da je enak rezultat kot pri margin-left in margin-right nastavljeno na avto
• V brskalnika vojne bodo čez nekaj dan.
• Na voljo bo samo en brskalnik za VSE.

Prenesite CSS in HTML zgornje rešitve tukaj (Downloaded 452 krat) .. za razumljivosti, je CSS ni optimizirana

PS: In mimogrede, to so sličice nekaj slik ki sem jih kliknili ...