Expressant TI

Abans que va haver de lidiar amb CSS per crear els nostres dissenys de pàgina, l'alineació d'alguns continguts dins d'una cel · la de la taula semblava jugar sol nen. Només cal establir la "alineació" o "valign" propietat de la taula per tenir l'alineació de la seva elecció, tros de la coca!
Amb dissenys de CSS, encara que tenim "vertical-align" de propietat dels elements, no sembla ser tan simple com la "alineació" o "valign" propietats. Per ser més specifiic la "vertical-align" no sembla resoldre cap dels teus problemes, especialment si s'escriu un tros de CSS cross-browser.

Sense l'ús de taules HTML, El problema de centrar en l'objecte, ja sigui una imatge o un text dins d'una divisió que conté, probablement ha estat un malson tota la interfície d'usuari / CSS desenvolupadors en algun moment. Aquest problema addicional s'extrapola les seves preocupacions de l'alineació, si l'objecte a ser centrat és de naturalesa dinàmica, és a dir, quan la seva altura és variable (alçada desconegut).

Encara que no existeix una solució coneguda senzill que funcioni en tota la gamma de navegadors que hem de tractar, la solució que he tractat d'arribar a sembla a treballar en els pocs navegadors que he provat en (IE6, IE7 , FF).

SOLUCIÓ:
En els navegadors com Mozilla, Opera i Safari, L'estrany comportament "vertical-align" la propietat pot ser portat als seus sentits, simplement mitjançant l'establiment de la "pantalla" de propietat de la divisió que conté a "table-cell" (display: table-cell) .

El problema segueix sent amb la família de navegadors Internet Explorer, que, no obstant, no semblen entendre el que amb el "table-cell" de propietat i ignorants com són, que simplement ho ignoren. La solució donada a continuació, encara que simples, els anuncis d'alguns elements més al seu DOM HTML per fer que les coses succeeixin.

El CSS i HTML es veu així
.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/> vistes: 3456 </ div>
</ Div>
</ Div>

El resultat és el següent: -

veure la demo aquí | Descarregar arxius d'origen (Descarregat 451 vegades)

---

Comprensió de la solució:
Per als navegadors que entenen display: table i display: cel · les de la taula de propietats, que rares vegades es necessita cap explicació. Per IE, amb l'ús específic d'un hack de IE (hack hash), és absolutament col · locar el contenidor d'objectes (obj_container) en la meitat de l'alçada disponible. Després objecte (obj) en és posició relativament i es mou cap amunt a la meitat de la seva alçada ... Bé! Em sembla entendre la mirada que el a la cara, però funciona. Proveu!
Les tècniques anteriors es combinen per donar-nos la solució per sobre de navegadors.

---

La CSS pot ser fàcilment modificat de la manera per aconseguir, vertical-align: top o vertical-align: bottom

TOP Alinear 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/> punts de vista: 1234 </ div>
</ Div>
</ Div>

El resultat és el següent: -

FONS Alinear 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/> punts de vista: 1234 </ div>
</ Div>
</ Div>

El resultat és el següent: -

veure la demo aquí | Descarregueu aquí

---

Centrat horitzontal de l'objecte, simplement aconsegueix amb la propietat margin, establint el marge esquerre i el dret d'auto-marge de

Sembla que les edats, ja que jo estava tractant de trobar una solució raonable a aquest problema d'alineació. Però ara, amb aquesta solució, em sento en pau petita.

Amb l'esperança que algun dia

• l'alineació vertical de la propietat en CSS funciona com ho fa dins d'una cel · la de la taula, SENSE haver de vèncer tant per les branques
• Si més no, l'establiment de margin-top: auto i margin-bottom: auto, donarà com a resultat el mateix que amb el marge esquerre i el conjunt margin-right per auto
• Les guerres del navegador serà de més d'un dia.
• Hi haurà un sol navegador per a TOTS.

Descarrega el CSS i HTML de la solució per sobre d'aquí (Descarregat 451 vegades) .. per a la comprensió, la CSS no s'ha optimitzat

PD: I per cert, aquestes són les miniatures d'algunes fotos que han fet clic ...