Uttrykke IT

Før vi måtte håndtere CSS for å lage våre sideoppsett, samkjøre noe av innholdet i en tabellcelle virket bare som en lek. Bare still inn på "align" eller "valign" eiendom på bordet for å få plasseringen av ditt valg, stykke kake!
Med CSS-layouter, selv om vi har "vertikal-align" eiendom for elementene, ser det ikke ut til å være så enkelt som "align" eller "valign" egenskaper. For å være mer specifiic den "vertikal-align" aldri ser ut til å løse noen av dine problemer, spesielt hvis er skrive et stykke for kryss-nettleser CSS.

Uten bruk av HTML-tabeller, problemet med sentrering på objekt, det være seg et bilde eller tekst i en inneholder divisjon, har trolig vært hver UI / CSS utviklere mareritt på enkelte punkt. Dette problemet fremskriver ytterligere bekymringer å samkjøre, hvis objektet som skal sentreres er dynamisk i sin natur, dvs. når høyden er variabel (ukjent høyde).

Selv om det er ingen kjent rett frem løsning som ville fungere på tvers av nettlesere vi har å forholde seg til, den løsningen som jeg har forsøkt å komme fram til synes å arbeide i de få nettlesere som jeg har prøvd det i (IE6, IE 7 , FF).

LØSNING:
I nettlesere som Mozilla, Opera og Safari, Den merkelige oppfører "vertikal-align" eiendom kan bringes til sine sanser, bare ved å sette "display" egenskapen til beholdersiden divisjon til "table-cell" (display: table-cell) .

Problemet er fortsatt med IE familie av nettlesere, som vet ennå ikke synes å forstå hva som skal med "table-cell" eiendom og uvitende som de er, de bare ignorere det. Løsningen gitt nedenfor, men enkle, annonser noen flere DOM elementer til HTML for å få ting til å skje.

CSS og HTML ser slik ut
.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 slik ut: -

se demo her | Last ned kildefiler (lastet ned 451 ganger)

---

Forstå løsningen:
For nettlesere som forstår display: table og display: table-celle egenskaper, må det sjelden noen forklaring. For IE, med bruk en IE spesifikk hack (hash hack), vi absolutt plassere objektet beholder (obj_container) i halvparten av den tilgjengelige høyden. Så objekt (obj) innenfor er posisjonen relativt og er flyttet opp med halvparten av høyden ... Vel! Jeg synes å forstå utseendet det på ansiktet ditt, men det fungerer. Prøv det!
De ovennevnte teknikkene er kombinert for å gi oss over korset nettleseren løsning.

---

CSS kan enkelt endres som nedenfor for å oppnå, vertikal-align: top eller vertikal-align: bunn

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 slik ut: -

BOTTOM 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 slik ut: -

se demo her | Last ned her

---

Horisontal sentrering av objektet bare oppnås med margin eiendom, ved å sette margin-venstre og margin-retten til auto

Virker som aldre, siden jeg prøvde å finne en fornuftig løsning på dette problemet justering. Men nå med denne løsningen, føler jeg på litt fred.

Med et håp om at en dag

• vertikal justering eiendom i CSS vil fungere som den gjør i en tabellcelle, UTEN å måtte slå mye rundt grøten
• Minst, sette margin-top: auto og margin-bottom: auto, vil gi som samme resultat som med margin-venstre og marginen til høyre satt til auto
• De Nettleser kriger vil være over en dag.
• Det vil bare én nettleser for ALLE.

Last ned CSS og HTML av ovennevnte løsning her (Nedlastet 451 ganger) .. for forståelighet, er CSS ikke blitt optimalisert

PS: Og forresten, de er miniatyrbilder av noen bilder jeg har klikket ...