Inden vi var nødt til at beskæftige sig med CSS til at skabe vores side layouts, som bringer noget af indholdet i en tabelcelle syntes bare en leg. Du skal blot indstille "justere" eller "valign" ejendom i tabellen for at få tilpasningen af dit valg, stykke kage!
Med CSS layout, selv om vi har "lodret-align" ejendom for de elementer, synes det ikke at være så simpelt som "tilpasse" eller "valign" egenskaber. For at være mere specifiic den "lodret-align" synes aldrig at løse nogen af dine problemer, især hvis der skriver et stykke af cross-browser CSS.
Uden brug af HTML-tabeller, er problemet med centreret om objektet er det et billede eller en tekst i en holdigt division, har sandsynligvis været hver UI / CSS udviklere mareridt på et tidspunkt. Dette problem yderligere ekstrapolerer dine bekymringer for at afstemme, om objektet til at være centreret er dynamisk af natur, dvs når dets højde er variabel (ukendt højde).
Selv om der er ingen kendte ligetil løsning, der ville arbejde på tværs af forskellige browsere, vi har at gøre med, den løsning, som jeg har forsøgt at nå frem til synes at arbejde i de få browsere, jeg har prøvet det i (IE6, IE 7 , FF).
LØSNINGEN:
I browsere som Mozilla, Opera og Safari, Det mærkelige opfører sig "lodret-align" ejendom kan bringes til fornuft, blot ved at sætte "display" ejendom indeholder division til "table-celle" (display: table-celle) .
Problemet er stadig med IE familie af browsere, som ikke endnu ikke synes at forstå, hvad der skal med "table-celle" ejendom og uvidende som de er, de bare ignorere det. Løsningen nedenfor, men simple, annoncer få mere DOM elementer til din HTML for at gøre tingene ske.
CSS og HTML ser sådan ud
.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/> visninger: 3456 </ div>
</ Div>
</ Div>
Resultatet ser således ud: -
se demo her | Hent kildefiler (Downloaded 452 gange)
Forståelse af løsningen: For de browsere, der forstår display: table og display: table-celle egenskaber, sjældent den har brug for nogen forklaring. For IE, med brug en IE specifikt hack (hash hack) vi absolut placere objektet beholder (obj_container) i halvdelen af den tilgængelige højde. Så objekt (obj) inden for er position relativt, og er flyttet op ved halvdelen af sin højde ... Nå! Jeg synes at forstå se den på dit ansigt, men det virker. Prøv det! Ovenstående teknikker kombineres for at give os den ovenstående cross browser løsning.
Transformerstationen kan let ændres som nedenfor for at opnå, lodret-align: top eller lodret-align: bund TOP Juster 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/> visninger: 1234 </ div>
</ Div>
</ Div>
Resultatet ser således ud: -
BUND Juster 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/> visninger: 1234 </ div>
</ Div>
</ Div>
Resultatet ser således ud: -
se demo her | Hent her
Vandret centrering af objektet blot opnået med den margen ejendom, ved at sætte margin-venstre og margin-ret til auto Synes lige aldre, da jeg prøvede at finde en fornuftig løsning på denne tilpasning problem. Men nu med denne løsning, føler jeg på lidt fred.
Med et håb om at en dag
- vertikal-tilpasning ejendom i CSS vil arbejde som det gør i en tabelcelle, uden at slå meget om den varme grød
- Mindst, sætte margin-top: auto og margin-bottom: auto, vil give det samme resultat som med margin-venstre og margin-rigtige sæt til auto
- De Browser krige vil være over en dag.
- Der vil kun én browser for ALLE.
Download CSS og HTML af ovennævnte løsning her (Downloaded 452 gange) .. for forståelighed, er CSS ikke er blevet optimeret
PS: Og ved den måde, er dem, miniaturer af nogle billeder, jeg har klikket ... 
