Qabel kellna biex jittrattaw CSS biex joħolqu layouts paġna tagħna, allinjament xi kontenut ġewwa ċelloli tabella deher play biss tat-tfal. Sempliċement jistabbilixxu l-"jallinjaw" jew "valign" proprjetà tat-tabella li jkollhom l-allinjament ta 'l-għażla tiegħek, biċċa kejk!
Bil taqsim CSS, għalkemm għandna "vertikali 'allinjament" proprjetà għall-elementi, ma jidhirx li tkun sempliċi daqs l-"jallinjaw" jew "valign" Properties. Biex wieħed ikun aktar specifiic l-"vertikali 'allinjament" qatt ma jidher li issolvi kwalunkwe problemi tiegħek, speċjalment jekk huma jiktbu biċċa ta' cross-browser CSS.
Mingħajr l-użu tat-Tabelli HTML, IL-PROBLEMA ta 'tiffoka fuq oġġett, kemm jekk tkun ta' immaġni jew xi test fi diviżjoni fihom, x'aktarx ilha kull lejl iżviluppaturi UI / CSS f'xi punt. Din il-problema aktar testrapola inkwiet tiegħek ta 'allinjament, jekk l-oġġett li jkun iffukat huwa dinamiku fin-natura, jiġifieri meta l-għoli tagħha hija varjabbli (tul mhux magħrufa).
Għalkemm m'hemm l-ebda soluzzjoni magħruf ħafif li tkun taħdem fuq il-firxa ta 'browsers għandna biex jittrattaw, is-soluzzjoni li jien ippruvajt li jaslu ma jidhirx li jaħdmu fil-browsers ftit li jien ippruvati f' (IE6, IE 7 , FF).
SOLUZZJONI:
Fil-browsers bħall Mozilla, Opera u Safari, Il-stramba iġib ruħu "vertikali 'allinjament" proprjetà jistgħu jinġiebu sensi tagħha, sempliċement billi jiġu ffissati l-"wirja" proprjetà tad-diviżjoni li fiha li "mejda taċ-ċelluli" (wirja: tabella taċ-ċelluli) .
Il-problema xorta tibqa 'familja IE ta' browsers, li, iżda ma jidhirx li jifhmu dak li mal-"tabella ta 'ċellula" proprjetà u injorant kif inhuma, huma biss jinjoraha. Is-soluzzjoni mogħtija hawn taħt, għalkemm sempliċi, ads ftit elementi aktar DOM għall HTML tiegħek biex tagħmel affarijiet jiġri.
Il-HTML u CSS tidher bħal dan
.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/> opinjonijiet: 3456 </ div>
</ Div>
</ Div>
Ir-riżultat tidher bħal dan: -
tara l-demo hawn | Il Fajls Download Sors (ddawnlowdjati 448 darbiet)
Nifhmu l-soluzzjoni: Għall-browsers li jifhmu wiri: tabella u l-wiri: tabella b'ċellula proprjetajiet, huwa rari jeħtieġ ebda spjegazzjoni. Għal IE, bl-użu 1 Hack speċifiku IE (Hack hash), aħna assolutament pożizzjoni tal-kontenitur oġġett (obj_container) f'nofs l-għoli disponibbli. Imbagħad oġġett (obj) fi ħdan l-pożizzjoni relattivament u jiġi mċaqlaq mill f'nofs l-għoli tagħha ... Ukoll! I jidhru li jifhmu l-ħarsa 'l-fuq wiċċ tiegħek, iżda Huwa jaħdem. Ipprova! It-tekniki ta 'hawn fuq huma magħquda biex tagħtina s-soluzzjoni hawn fuq browser transkonfinali.
Is-CSS jistgħu jiġu faċilment modifikati kif hawn taħt biex tikseb, vertikali tallinja: quċċata jew vertikali tallinja: qiegħ TOP Tallinja 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/> opinjonijiet: 1234 </ div>
</ Div>
</ Div>
Ir-riżultat tidher bħal dan: -
QIEGĦ Tallinja 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/> opinjonijiet: 1234 </ div>
</ Div>
</ Div>
Ir-riżultat tidher bħal dan: -
tara l-demo hawn | Download hawn
Orizzontali ċentru ta 'l-oġġett sempliċement miksub mal-proprjetà marġni, billi jistabbilixxu l-marġni tax-xellug u l-marġni tal-lemin l-awto Tidher bħal etajiet, peress li jien kien qed jipprova jsib soluzzjoni raġonevoli biex din il-problema allinjament. Imma issa ma din is-soluzzjoni, inħoss fil-paċi ftit.
Bil-tama li someday
- vertikali-allinjament proprjetà CSS se taħdem bhalu ma ġewwa ċelloli tal-mejda, mingħajr ma jkollhom jegħlbu ħafna madwar l-bush
- Mill-inqas, l-iffissar marġini ta 'fuq: awtomatiku u marġini tal-qiegħ: auto, ser jagħti l-istess riżultat bħal ma marġini tax-xellug u s-sett marġni tal-lemin l-awto
- Il-gwerer Browser se tkun fuq xi jum.
- Se jkun hemm biss ONE Browser għall KOLLHA.
Niżżel il-HTML u CSS tas-soluzzjoni hawn fuq hawn (ddawnlowdjati 448 darbiet) .. għal ftehim, il-CSS ma jkunx ġie ottimizzat
PS: U mill-mod, dawn huma thumbnails ta 'xi ritratti nkun għafast ... 
