Innan vi hade att göra med CSS för att skapa våra sidlayouter, anpassa visst innehåll i en tabellcell verkade bara en barnlek. Ställ bara in "justera" eller "valign" egendom i tabellen att anpassningen av ditt val, piece of cake!
Med CSS-layouter, även om vi har "vertikal-align" egendom för elementen, verkar det inte vara så enkelt som "justera" eller "valign" egenskaper. För att vara mer specifiic den "vertikala-align" aldrig verkar lösa alla dina problem, särskilt om är skriva en bit olika webbläsare CSS.
Utan användning av HTML-tabeller, problemet med centrering på objekt, vare sig det en bild eller text i en innehåller division, har nog varit alla UI / CSS utvecklare mardröm någon gång. Detta problem extrapolerar ytterligare dina bekymmer att anpassa, om objektet som ska centreras är dynamisk till sin natur, det vill säga när dess höjd är variabel (okänd höjd).
Men det finns ingen känd rättfram lösning som skulle fungera inom alla webbläsare vi har att göra med, den lösning som jag har försökt att komma fram till inte verkar fungera i de få webbläsare som jag har provat det i (IE6, IE 7 , FF).
LÖSNING:
I webbläsare som Mozilla, Opera och Safari, Den märkliga uppför "vertikal-align" egendom kan föras till sina sinnen, helt enkelt genom att ställa in "display" egendom innehåller divisionen till "table-cell" (display: table-cell) .
Problemet är fortfarande med IE familj webbläsare som inte ännu inte tycks förstå vad de ska med "table-cell" egendom och okunniga som de är, de bara ignorera det. Lösningen nedan, men enkla, annonser några mer DOM element i HTML för att få saker att hända.
CSS och HTML ser ut så här
.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/> Visningar: 3456 </ div>
</ Div>
</ Div>
Resultatet ser ut så här: -
visa demo här | Ladda ner Källfiler (Nedladdat 452 gånger)
Förstå lösning: För de webbläsare som förstår display: bord och display: table-cell egenskaper behöver sällan någon förklaring. För IE, med hjälp en IE specifika hack (hash hack), placera vi absolut objektet behållaren (obj_container) i hälften av den tillgängliga höjden. Därefter objekt (obj) inom är läget relativt och flyttas upp med hälften av dess höjd ... Tja! Jag tycks förstå utseendet på i ansiktet, men det fungerar. Prova det! Ovanstående tekniker kombineras för att ge oss ovanstående korset webbläsare lösning.
Stationen kan lätt modifieras enligt nedan för att uppnå vertikal-align: top eller vertikal-align: bottom TOP Rikta 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/> Visningar: 1234 </ div>
</ Div>
</ Div>
Resultatet ser ut så här: -
BOTTEN Rikta 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/> Visningar: 1234 </ div>
</ Div>
</ Div>
Resultatet ser ut så här: -
visa demo här | Ladda ner här
Horisontell centrering av objektet bara uppnås med marginal egendom, genom att sätta margin-left och margin-rätten att auto Verkar som åldrar, eftersom jag försökte att hitta en rimlig lösning på denna anpassning problem. Men nu med denna lösning, känner jag på lite lugn.
Med en förhoppning om att en dag
- vertikal inriktning fastighet i CSS kommer att fungera som det gör i en tabellcell, utan att behöva slå mycket kring het gröt
- Åtminstone sätta margin-top: Auto och margin-bottom: auto, kommer att ge samma resultat som med margin-left och margin-rätten inställd på auto
- De webbläsaren krig kommer att vara över en dag.
- Det kommer bara en webbläsare för ALLA.
Hämta CSS och HTML-koden för ovanstående lösning här (Nedladdat 452 gånger) .. För begriplighet är CSS inte optimerats
PS: Och förresten, de är miniatyrer av några bilder jag har klickat ... 
