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?
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?
Mendi Plus
Ups vale, que es centrado vertical también!
hartum
Mendi
Ups vale, que es centrado vertical también!
y los comentarios son condicionales no adicionnales ;-)
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
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
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
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
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.
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
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.
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
Ya ves, ojalá hubiera un foro donde poder preguntar todas estas chorradas
:x
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
zigotica
(lo se lo se, todo se andará...) :)
Eso
;)
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/
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.
orange
Gracias taarq
:D
doblem
aps... Lo que hace leer rápido :oops:
Se lo diré a los estándaresaccesibles de por aquí.
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...
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.
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.
Klein
zigotica
<div class="quote">
ozke
<blockquote>
<div class="quote">
orange
<blockquote>
"zigotica"
Paciencia... :) Queda poco...
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?.
hartum
[offtopic]
Estooooooooooooooooo...........
¿y se puede pedir un buscador decente tb????
[/offtopic]
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.
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.
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
¡Muchas gracias apañao!. De momento voy a experimentar con lo que me has pasado...a ver si consigo algo :D