Antes de que tuvo que lidiar con CSS para crear nuestros diseños de página, la alineación de algunos contenidos dentro de una celda de la tabla parecía jugar solo niño. Basta con establecer la "alineación" o "valign" propiedad de la tabla para tener la alineación de su elección, pedazo de la torta!
Con diseños de CSS, aunque tenemos "vertical-align" de propiedad de los elementos, no parece ser tan simple como la "alineación" o "valign" propiedades. Para ser más specifiic la "vertical-align" no parece resolver ninguno de tus problemas, especialmente si se escribe un trozo de CSS cross-browser.
Sin el uso de tablas HTML, El problema de centrar en el objeto, ya sea una imagen o un texto dentro de una división que contiene, probablemente ha sido una pesadilla toda la interfaz de usuario / CSS desarrolladores en algún momento. Este problema adicional extrapola sus preocupaciones de la alineación, si el objeto a ser centrado es de naturaleza dinámica, es decir, cuando su altura es variable (altura desconocido).
Aunque no existe una solución conocida sencillo que funcione en toda la gama de navegadores que tenemos que tratar, la solución que he tratado de llegar a parece a trabajar en los pocos navegadores que he probado en (IE6, IE7 , FF).
SOLUCIÓN:
En los navegadores como Mozilla, Opera y Safari, El extraño comportamiento "vertical-align" la propiedad puede ser llevado a sus sentidos, simplemente mediante el establecimiento de la "pantalla" de propiedad de la división que contiene a "table-cell" (display: table-cell) .
El problema sigue siendo con la familia de navegadores Internet Explorer, que, sin embargo, no parecen entender lo que con el "table-cell" de propiedad e ignorantes como son, que simplemente lo ignoran. La solución dada a continuación, aunque simples, los anuncios de algunos elementos más a su DOM HTML para hacer que las cosas sucedan.
El CSS y HTML se ve así
.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/> vistas: 3456 </ div>
</ Div>
</ Div>
El resultado es el siguiente: -
ver la demo aquí | Descargar archivos de origen (Descargado 452 veces)
Comprensión de la solución: Para los navegadores que entienden display: table y display: celdas de la tabla de propiedades, que rara vez se necesita ninguna explicación. Para IE, con el uso específico de un hack de IE (hack hash), es absolutamente colocar el contenedor de objetos (obj_container) en la mitad de la altura disponible. Luego objeto (obj) en es posición relativamente y se mueve hacia arriba a la mitad de su altura ... Bueno! Me parece entender la mirada que el en su cara, pero funciona. Pruébelo! Las técnicas anteriores se combinan para darnos la solución por encima de navegadores.
La CSS puede ser fácilmente modificado de la siguiente manera para lograr, 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/> puntos de vista: 1234 </ div>
</ Div>
</ Div>
El resultado es el siguiente: -
FONDO 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/> puntos de vista: 1234 </ div>
</ Div>
</ Div>
El resultado es el siguiente: -
ver la demo aquí | Descargue aquí
Centrado horizontal del objeto, simplemente consigue con la propiedad margin, estableciendo el margen izquierdo y el derecho de auto-margen de Parece que las edades, ya que yo estaba tratando de encontrar una solución razonable a este problema de alineación. Pero ahora, con esta solución, me siento en paz pequeña.
Con la esperanza de que algún día
- la alineación vertical de la propiedad en CSS funciona como lo hace dentro de una celda de la tabla, SIN tener que vencer tanto por las ramas
- Por lo menos, el establecimiento de margin-top: auto y margin-bottom: auto, dará como resultado lo mismo que con el margen izquierdo y el conjunto margin-right para auto
- Las guerras del navegador será de más de un día.
- Habrá un solo navegador para TODOS.
Descarga el CSS y HTML de la solución por encima de aquí (Descargado 452 veces) .. para la comprensión, la CSS no se ha optimizado
PD: Y por cierto, esas son las miniaturas de algunas fotos que han hecho clic ... 
