Te drukken

Voordat we te maken gehad met CSS op onze pagina lay-outs te creëren, waarbij u bepaalde inhoud in een tabel cel leek net kinderspel. U hoeft alleen maar de "lijnen" of "valign" eigendom van de tabel om de uitlijning van uw keuze, fluitje van een cent hebben!
Met CSS-lay-outs, maar we hebben "vertical-align 'eigenschap voor de elementen, lijkt het niet zo eenvoudig te zijn als de" align "of" valign "eigenschappen. Om meer specifiic de "vertical-align 'nooit lijkt op te lossen al uw problemen, vooral als zijn schrijven een fluitje van een cross-browser CSS.

Zonder het gebruik van HTML-tabellen, het probleem van het centreren op object, of het nu een afbeelding of een tekst in een bevattende divisie, is waarschijnlijk om de UI / CSS ontwikkelaars nachtmerrie op een bepaald punt. Dit probleem extrapoleert verder je zorgen af ​​te stemmen, als het object dat moet worden gecentreerd is dynamisch van aard, dat wil zeggen wanneer de hoogte is variabel (onbekend hoogte).

Hoewel er voor zover bekend geen recht toe recht aan oplossing die zou werken het gehele scala van browsers hebben we te maken met de oplossing die ik heb geprobeerd om te komen tot wel lijken te werken in de weinige browsers die ik heb het geprobeerd (IE6, IE 7 , FF).

OPLOSSING:
In browsers zoals Mozilla, Opera en Safari, Het vreemde gedrag "vertical-align 'eigenschap kan worden gebracht tot bezinning, simpelweg door het instellen van de" display "eigendom van de bevattende divisie' table-cell" (display: table-cell) .

Het probleem blijft nog steeds met IE familie van browsers, die maar niet lijken te begrijpen wat er met de 'table-cell "eigendom en onwetend als ze zijn, ze gewoon negeren. De oplossing hieronder gegeven, hoewel eenvoudig, advertenties een paar DOM-elementen om uw HTML om dingen te laten gebeuren.

De CSS en HTML ziet er als volgt
.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/> bekeken: 3456 </ div>
</ Div>
</ Div>

Het resultaat ziet er als volgt uit: -

hier demo bekijken | Download Source Files (gedownload 454 keer)

---

Inzicht in de oplossing:
Voor de browsers die weergave te begrijpen: tafel en display: table-cell eigenschappen, die het nodig heeft zelden enige uitleg. Voor IE, met het gebruik een IE-specifieke hack (hash hack), we absoluut positioneren het object container (obj_container) in de helft van de beschikbare hoogte. Dan object (obj) binnen is positie relatief en wordt bewogen door de helft van de hoogte ... Nou! Ik schijn om het uiterlijk van de op je gezicht te begrijpen, maar het werkt. Probeer het maar!
De bovengenoemde technieken worden gecombineerd om ons bovengenoemde dwarsbrowser oplossing.

---

De CSS kan gemakkelijk worden als volgt gewijzigd te bereiken, vertical-align: top of vertical-align: bottom

TOP Lijn 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/> bekeken: 1234 </ div>
</ Div>
</ Div>

Het resultaat ziet er als volgt uit: -

BOTTOM Lijn 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/> bekeken: 1234 </ div>
</ Div>
</ Div>

Het resultaat ziet er als volgt uit: -

hier demo bekijken | Download hier

---

Horizontale centrering van het object gewoon bereikt met de marge goed, door het instellen van de margin-left en de margin-right op auto

Het lijkt erop dat leeftijd, omdat ik probeerde om een ​​redelijke oplossing voor dit uitlijning probleem te vinden. Maar nu met deze oplossing, voel ik me weinig vrede.

Met een hoop dat op een dag

• verticale uitlijning onroerend goed in CSS zal werken zoals het hoort in een tabel cel, zonder te veel rond de pot
• Tenminste, het instellen van margin-top: auto en margin-bottom: auto, zal geven hetzelfde resultaat als bij margin-left en de margin-right op auto
• De browser oorlogen zal over enkele dagen.
• Er zal alleen een browser voor iedereen.

Download de CSS en HTML van de bovenstaande oplossing hier (gedownload 454 keer) .. voor begrijpelijkheid, wordt de CSS niet geoptimaliseerd

PS: En trouwens, dat zijn thumbnails van een aantal foto's die ik heb geklikt ...