Prieš mums teko susidurti su CSS sukurti puslapių maketus, derinant tam tikrą turinį viduje lentelės langelį atrodė tik vaikų žaidimas. Tiesiog nustatykite "align" arba "valign", lentelėje turi savo pasirinkimą derinimą, torto gabalas nuosavybė!
Su CSS išdėstymai, nors mes turime "vertical-align" turtą elementų, jis ne atrodo taip paprasta, kaip "align" arba "valign", savybių. Norėdami būti daugiau specifiic, "vertical-align" niekada, atrodo, išspręsti jūsų problemos, ypač jei yra parašyti įvairių naršyklių CSS gabalas.
Be HTML lentelėse, centravimo ant objekto problema, tai kai per turinčio padalinys vaizdas arba tekstas, tikriausiai kiekvienas UI / CSS kūrėjai košmaras tam tikru momentu. Šis problema toliau Ekstrapoliavusi, savo rūpesčius suderinti, jei objektas turi būti centre, yra dinamiškas pobūdžio, ty kai jos aukštis yra nevienodas (nežinoma aukštis).
Nors nėra žinoma tiesiai į priekį sprendimas, kad būtų vykdomos visose naršyklėse, mes turime spręsti, sprendimas, kad aš bandė atvykti ne daro, atrodo, dirbti, kad aš išbandžiau keletą naršyklių (IE6, IE 7 , FF).
SPRENDIMAS:
Naršyklėse kaip Mozilla, Opera ir Safari, keistai elgiasi, "vertical-align" nuosavybė gali būti patraukti savo pojūčiais, tiesiog "Ekranas" turtą turinčio padalijimo "stalo ląstelių kalbomis: lentelės ląstelių) .
Problema vis dar lieka IE naršyklių šeimai, kuris, tačiau neatrodo, kad suprastų, ką turi "lentelės ląstelių" nuosavybės ir nežino, kaip jie, jie tiesiog ignoruoti. Sprendimas pateikiamas toliau, nors paprastų, Reklamuokitės keletą daugiau DOM elementus į savo HTML padaryti dalykai įvyktų.
CSS ir HTML atrodo taip
.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/> Peržiūrėjimų skaičius: 3456 </ div>
</ Div>
</ Div>
Rezultatas atrodo taip:
peržiūrėti demo čia | Parsisiųsti šaltinio failus (atsisiųsta 452 kartus)
Supratimas sprendimas: Naršyklių, kurios supranta kalbomis: lentelės ir kalbomis: lentelės ląstelių reikiamas savybes, jis retai turi jokio paaiškinimo. IE, naudojimo, ty konkretus Hack (maišos Hack), mes visiškai poziciją objekto konteineriams (obj_container), pusė turima aukščio. Tada objektas (obj) per santykinai yra pozicija ir pakilo pusėje jos aukščio ... Na! Aš, atrodo, supranta, kad ant veido išvaizdą, bet jis veikia. Išbandyk! Pirmiau minėti metodai kartu suteikia mums virš kryžminio naršyklės sprendimą.
CSS gali būti lengvai modifikuotas, kaip nurodyta toliau pasiekti, vertical-align: viršuje arba vertikaliai-align: dugninis Top išlygina 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/> Peržiūrėjimų skaičius: 1234 </ div>
</ Div>
</ Div>
Rezultatas atrodo taip:
Dugnas Suderinti 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/> Peržiūrėjimų skaičius: 1234 </ div>
</ Div>
</ Div>
Rezultatas atrodo taip:
peržiūrėti demo čia | Parsisiųsti čia
Horizontali centravimo objekto tiesiog pasiektos ribinės grimzlės turtą, nustatant margin-left ir skirtumas teisė į automatinio Atrodo, amžiaus, nes aš bandžiau rasti tinkamą sprendimą į šią lygiavimo problemą. Bet dabar su šio tirpalo, jaučiuosi šiek tiek taikos.
Su viltimi, kad kažkada
- Vertikalus lygiavimas CSS nuosavybė veiks taip, kaip ji viduje lentelės langelį, BE įveikti daug aplink avilį
- Bent jau margin-top: automatinis ir margin-bottom: automatinis, duos tokį patį rezultatą kaip su margin-left ir marža teisė rinkinys auto
- Naršyklė karai bus per tam tikrą dieną.
- Yra tik viena naršykle.
Parsisiųsti CSS ir HTML Pirmiau pateiktas sprendimas čia (atsisiųsta 452 kartus) .. suprantamumo, CSS nebuvo optimizuotas
PS: Ir beje, tie, kurie miniatiūros kai kurių nuotraukas aš spustelėjo ... 
