Autor Tema: Centrar verticalmente  (Leído 929 veces)

Desconectado NetRunner

  • PHPerit@
  • *
  • Mensajes: 4
  • Karma: 0
  • Nuev@ PHPer@
    • Ver Perfil
Centrar verticalmente
« en: 29 de Junio de 2012, 17:15:33 pm »
¡Hola!

Tengo una imagen que quiero centrar horizontalmente y verticalmente. Pero todos los códigos que he encontrado me fallan.

Código: [Seleccionar]
#contenedor {
  width: 500px;
  height: 500px;
 
  position: absolute;
  top: 50%;
  left: 50%;
 
  margin-top: -250px;   /* height/2 = 500px / 2 */
  margin-left: -250px;  /* width/2 = 500px / 2 */

¿Alguien podría ayudarme, por favor?

Comunidad PHPeros

Centrar verticalmente
« en: 29 de Junio de 2012, 17:15:33 pm »

Desconectado Caobiita!

  • PHPer@ Fijo
  • ***
  • Mensajes: 214
  • Karma: 5
  • Sexo: Masculino
  • ¡Aprendiendo!
    • Ver Perfil
    • Próximamente
Re:Centrar verticalmente
« Respuesta #1 en: 30 de Junio de 2012, 01:53:10 am »
Para centrar la iamgen horizontalmente yo usaría text-align..

Código: [Seleccionar]
.imagen-centrada {
text-align: center;
}

y para usarlo..

Código: [Seleccionar]
<div class="imagen-centrada"><img src="ruta"></div>
y para centrar verticalmente, si solamente es una imagen o una linea de texto, usaría line-height y le pondría una altura que sea la misma que la del div.
En construcción.

Desconectado lDromedario

  • PHPerit@
  • *
  • Mensajes: 11
  • Karma: 0
  • Sexo: Masculino
  • Altruista en general :)
    • Ver Perfil
    • HabboTree
Re:Centrar verticalmente
« Respuesta #2 en: 04 de Septiembre de 2012, 01:08:08 am »
Sinceramente no se si con CSS se podria centrar siendo que jamas lo eh intentado pero yo te recomiendo que uses html para ello...

Código: [Seleccionar]
<table width="100%" height="100%">
<tbody>
<tr>
<td align="center" valign="middle">
<img src="path/to/image" alt="">
</td>
</tr>
</tbody>
</table>
>=> [link=www.twitter.com/DromedarioH]@DromedarioH[/link]

Desconectado maska

  • PHPer@ Fijo
  • ***
  • Mensajes: 126
  • Karma: 2
  • Nuev@ PHPer@
    • Ver Perfil
Re:Centrar verticalmente
« Respuesta #3 en: 28 de Octubre de 2012, 13:39:57 pm »
¡Hola!

Tengo una imagen que quiero centrar horizontalmente y verticalmente. Pero todos los códigos que he encontrado me fallan.

Código: [Seleccionar]
#contenedor {
  width: 500px;
  height: 500px;
 
  position: absolute;
  top: 50%;
  left: 50%;
 
  margin-top: -250px;   /* height/2 = 500px / 2 */
  margin-left: -250px;  /* width/2 = 500px / 2 */

¿Alguien podría ayudarme, por favor?

Para qué escribir cosas que ya están escritas.
Aquí te dejo un enlace dónde te explica cómo centrar la imagen. Saludos. Espero que sea de gran ayuda.
http://www.scourdesign.com/articulos/tutoriales/css/css10.php