Bago namin ay may sa makitungo sa CSS upang lumikha ng ang aming mga layout ng pahina, pagpapantay ilang mga nilalaman sa loob ng isang cell talahanayan tila paglalaro lamang bata. Lamang itakda ang "ihanay" o "valign" na ari-arian ng talahanayan upang ang pagkakahanay ng iyong gusto, piraso ng keyk!
Sa CSS layout, bagaman mayroon kami "vertical-ihanay" ari-arian para sa mga elemento, hindi ito ay mukhang bilang simpleng bilang ang "ihanay" o "valign" na katangian. Upang maging mas specifiic "vertical-ihanay" hindi kailanman tila upang malutas ang anumang ng iyong mga problema, lalo na kung ay magsulat ng isang piraso ng cross-browser CSS.
Walang ang paggamit ng mga HTML Table, ANG PROBLEMA ng pagsasentro sa bagay, ito ang isang imahe o ng ilang mga teksto sa loob ng isang naglalaman division, ay marahil bawat UI / developer ng CSS bangungot sa ilang mga punto. Ang problemang ito ay karagdagang extrapolates ang iyong mga alalahanin ng pagpapantay, kung ang bagay na gitna ay dynamic na sa kalikasan, ie kapag ang taas nito ay variable (hindi kilala ang taas).
Kahit na doon ay hindi kilala tuwid forward solusyon na gumagana sa buong hanay ng mga browser na kami ay may sa makitungo sa, ang solusyon na sinubukan ko ay dumating sa ang mukhang gumana sa ilang mga browser na Sinubukan ko ito sa (IE6, IE 7 , FF).
Solusyon:
Sa mga browser tulad ng Mozilla, Opera at Safari, Ang kakaiba behaving "vertical-ihanay" ari-arian ay dadalhin sa kanyang mga pandama, lamang sa pamamagitan ng pagtatakda ng "display" na ari-arian ng mga naglalaman ng dibisyon sa "mesa-cell" (display: talahanayan-cell) .
Ang problema pa rin nananatiling may IE pamilya ng mga browser, na, ngunit hindi mukhang upang maunawaan kung ano ang "mesa-cell" ari-arian at ignorante na ang mga ito, sila lamang huwag pansinin ito. Ang solusyon na ibinigay sa ibaba, bagaman simple, ang mga ad ng ilang higit pa DOM mga elemento sa iyong HTML upang gumawa ng mga bagay na mangyayari.
Ang CSS at HTML ay ganito ang hitsura
.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/> view: 3456 </ div>
</ Div>
</ Div>
Ang resulta ay ganito ang hitsura: -
tingnan ang demo dito | Download Source File (download na 452 beses)
Unawa sa ang solusyon: Para sa browser na maunawaan ng display: table at display: katangian ng talahanayan sa cell, bihira ito nangangailangan ng anumang paliwanag. Para sa IE, ang paggamit ng isang IE partikular na na magtadtad (hash magtadtad), kami ay ganap na iposisyon ang bagay na lalagyan (obj_container) sa kalahati ng mga magagamit na taas. Pagkatapos bagay (obj) sa loob ay posisyon sa relatibong at ay inilipat up sa pamamagitan ng kalahati ng kanyang taas ... Well! Mukhang ako na maunawaan ang hitsura sa iyong mukha, ngunit ito gumagana. Subukan ito! Sa itaas na mga pamamaraan ay pinagsama upang magbigay sa amin sa itaas ng cross browser solusyon.
Ang CSS ay maaaring madaling mabago bilang sa ibaba upang makamit ang, vertical-ihanay: tuktok o vertical-ihanay: ilalim TOP Pantayin sa 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/> view: 1234 </ div>
</ Div>
</ Div>
Ang resulta ay ganito ang hitsura: -
Ika-Pantayin sa 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/> view: 1234 </ div>
</ Div>
</ Div>
Ang resulta ay ganito ang hitsura: -
tingnan ang demo dito | I-download dito
Pahalang na pagsasentro ng mga bagay na lamang nakamit ang ari-arian ng margin, sa pamamagitan ng pagtatakda ng margin-kaliwa at ang margin-karapatan sa auto Tila tulad ng edad, dahil ako ay sinusubukan upang mahanap ang isang makatwirang solusyon sa problemang ito ng pagkakahanay. Ngunit ngayon ay may solusyon na ito, nararamdaman ko sa maliit na kapayapaan.
Sa isang pag-asa na sa ibang araw
- vertical-align na ari-arian sa CSS ay gumagana tulad ng ginagawa nito sa loob ng table ang isang cell, WALANG upang matalo magkano sa paligid ng bush
- Hindi bababa sa, ang pagtatakda ng margin-itaas: auto at margin-ilalim: auto, ay magbibigay ng parehong resulta sa margin-kaliwa at kanang ang margin-set sa auto
- Ang giyera ng Browser ay sa paglipas ng ilang araw.
- May ay lamang ng ONE Browser para LAHAT.
I-download ang CSS at HTML sa itaas solusyon dito (Nai-download na 452 beses) ... para sa understandability, ang CSS ay hindi nai-optimize
PS: At sa pamamagitan ng ang paraan, ang mga thumbnail ng ilang mga larawan na ako ay nag-click ... 
