Centrar con CSS (otra solución)
9 seguidores
Y van ya unas cuantas, esta no la conocia, disculpen si ya se puso por aqui:
<code>#MyContent {
position: absolut e ;
height: 300px;
width: 200px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}</code>
via:
http://511.dabomb.com.ar/2006/07/centrar/
ejemplo:
http://511.dabomb.com.ar/testcase/centrar/001.html
*no funciona en explorer, pero para eso ya tenemos los comentarios condicionales, no?
aimaro
¡Muchas gracias apañao!. De momento voy a experimentar con lo que me has pasado...a ver si consigo algo :D
t.a.a.r.q.
Si, de momento a mí me funciona, te he hecho un ejemplo
Los archivos fuente los tienes aquí, sólo tienes que adaptarlos a tus necesidades...
Saludos ;D
//EDITO...
No te había leído bien, lo siento.
Te he hecho otro ejemplo que se adapta a lo que quieres, funciona bien en IE 6 y 7, y Firefox, pero en Opera se comporta de forma extraña, sólo en el centrado horizontal, no sé si te importará, ya que estamos hablando del vertical, así que te lo pongo también:
ejemplo
fuente
aimaro
¿y eso me valdría para las dos columnas?. Es decir, un contenedor centrado que contiene una columna principal y luego una columna más estrecha a la derecha con el histórico de archivos, breve descripción, etc.
hartum
aimaro
Hola chicos. Es la primera vez que me toca hacer un centrado vertical y he estado buscando por el foro y por Google y he descubierto que hay muchísimas formas de hacerlo. Estoy hecha un lío porque no sé cuál de todas escoger. ¿Existe alguna más o menos estándar?. ¿Alguien me aconseja alguna en particular?.
visto lo visto yo creo que lo mejor es:
0) declara el height del html y del body 100%
1) declara la posicion absolute de lo que quieras centrar
2) dale top: 50%;
3) dale un margin top negativo en pixeles a lo que quieras centrar donde la medida es el_alto_de_lo_que_quieras_centrar/2
y ya esta.
hartum
[offtopic]
Estooooooooooooooooo...........
¿y se puede pedir un buscador decente tb????
[/offtopic]
aimaro
Hola chicos. Es la primera vez que me toca hacer un centrado vertical y he estado buscando por el foro y por Google y he descubierto que hay muchísimas formas de hacerlo. Estoy hecha un lío porque no sé cuál de todas escoger. ¿Existe alguna más o menos estándar?. ¿Alguien me aconseja alguna en particular?.
Klein
zigotica
<div class="quote">
ozke
<blockquote>
<div class="quote">
orange
<blockquote>
"zigotica"
Paciencia... :) Queda poco...
zigotica
ozke
<div class="quote">
orange
<blockquote>
<div class="quote">
zigotica
<blockquote>(lo se lo se, todo se andará...) :)</blockquote>
</div>
Eso
;)</blockquote>
</div>
Yo siempre insisto en lo d dmstk docs o algo por el estilo, fijo q lo están preparando y creo personalmente que será un salto enorme para dmstk en cuanto salga...
me consta que así es, yo creo que con un poco de paciencia nos lo van a ir presentando proximamente.
t.a.a.r.q.
Bueno, no se si muchos de aquí también participan en otros foros, yo lo hago en Cristalab, y la verdad es que tienen muy bien organizado el tema de los tutoriales, tips, aportes, y esas cosas.
ozke
orange
<div class="quote">
zigotica
<blockquote>(lo se lo se, todo se andará...) :)</blockquote>
</div>
Eso
;)
Yo siempre insisto en lo d dmstk docs o algo por el estilo, fijo q lo están preparando y creo personalmente que será un salto enorme para dmstk en cuanto salga...
doblem
aps... Lo que hace leer rápido :oops:
Se lo diré a los estándaresaccesibles de por aquí.
orange
Gracias taarq
:D
t.a.a.r.q.
doblem
¿Y esto...?
/* remove default white areas, establish measurement scales */
html, body {
margin: 0;
padding: 0;
height: 100%;
}
/* table */
html {
display: table;
overflow: visible;
}
/* with one table cell. content in it is vertically centered */
body {
background: #f0ffe1;
display: table-cell;
vertical-align: middle;
}
http://www.aplus.co.yu/lab/rdc/
orange
display: table-cell es también una solución muy minoritaria en cuato a soporte.
Yo creo que me voy a seguir quedando con los márgenes negativos, aunque la verdad es que ya no sé ni cuánto tiempo hace que no me llega una web en ese estilo.
doblem
¿Y esto...?
/* remove default white areas, establish measurement scales */
html, body {
margin: 0;
padding: 0;
height: 100%;
}
/* table */
html {
display: table;
overflow: visible;
}
/* with one table cell. content in it is vertically centered */
body {
background: #f0ffe1;
display: table-cell;
vertical-align: middle;
}
http://www.aplus.co.yu/lab/rdc/
orange
zigotica
(lo se lo se, todo se andará...) :)
Eso
;)
zigotica
orange
Ya ves, ojalá hubiera un foro donde poder preguntar todas estas chorradas
:x
ojalá hubiera una sección con mini-tutos para que no se hiciesen siempre las mismas preguntas en el mencionado foro...
(lo se lo se, todo se andará...) :)
orange
Ya ves, ojalá hubiera un foro donde poder preguntar todas estas chorradas
:x
hartum
cooooooooooooooooooooooooño y yo tomando mil precauciones por la historia de los margenes negativos, porque creia que safari no se los tragaba si es que cuando me complico la vida me la complico yo solito, cagonsos!!!
orange
display: table-cell es también una solución muy minoritaria en cuato a soporte.
Yo creo que me voy a seguir quedando con los márgenes negativos, aunque la verdad es que ya no sé ni cuánto tiempo hace que no me llega una web en ese estilo.
t.a.a.r.q.
joer, está bien eso de poder centrar verticalmente, las formas que había visto antes eran un poco más complejas, con display:table, y cosas del estilo.
No funciona tampoco en IE7 por lo que he comprobado, pero que le den morcilla, tampoco se pierde mucho por poner comentarios...
orange
Todos los navegadores actuales centran bien con los márgenes negativos. Incluso los Explorer 5.5 y 5.0 Windows. En mac igual... todos excepto Explorer 5 Mac (que sí pilla márgenes negativos pero calcula mal el tema de porcentajes de pantalla verticales y posiciones absolutas, porque en horizontal lo centra bien).
De hecho estoy seguro que si un navegador no pilla márgenes negativos seguro que tampoco pilla esta solución.
hartum
orange
<div class="quote">
HARTUM
<blockquote>No,no,no, ni mucho menos (ya quisiera yo) los tiros van mas bien por el centrado vertical en navegadores que no aceptan margenes negativos.</blockquote>
</div>
Es decir Explorer 5 Mac que tampoco va a aceptar esto otro
:P
yyyyyy safari?*nota mental:engañar a alguien para que me ceda un mac.
orange
HARTUM
No,no,no, ni mucho menos (ya quisiera yo) los tiros van mas bien por el centrado vertical en navegadores que no aceptan margenes negativos.
Es decir Explorer 5 Mac que tampoco va a aceptar esto otro
:P
hartum
No,no,no, ni mucho menos (ya quisiera yo) los tiros van mas bien por el centrado vertical en navegadores que no aceptan margenes negativos.
orange
HARTUM
Y van ya unas cuantas, esta no la conocia, disculpen si ya se puso por aqui:
<code>#MyContent {
position: absolut e ;
height: 300px;
width: 200px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}</code>
via:
http://511.dabomb.com.ar/2006/07/centrar/
ejemplo:
http://511.dabomb.com.ar/testcase/centrar/001.html
*no funciona en explorer, pero para eso ya tenemos los comentarios condicionales, no?
No sé qué decirte, la otra solución funciona bien y tampoco creo que haya que desterrar todavía al IE6.
hartum
Mendi
Ups vale, que es centrado vertical también!
y los comentarios son condicionales no adicionnales ;-)
Mendi Plus
Ups vale, que es centrado vertical también!
Mendi Plus
Hombre, si no funciona en explorer, prefiero no poner comentarios adicionales y volver a la clásica:
#MyContent {
height: 300px;
width: 200px;
margin: 0 auto 0 auto;
}
No?