Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Centrar Div (http://www.forosdelweb.com/f53/centrar-div-442408/)

pasada.net 11/11/2006 21:45

Centrar Div
 
Buenas me gustaria que alguien me dijese como puedo centrar este Div en la pagina web para que no se me queda todo a la izquierda sino que siempre esten las imagenes centradas en la web .. gracias

aqui esta la direccion web http://www.pasada.net/index1.html

elrauli 11/11/2006 22:04

Hola, por lo que vi en tu código fuente estás utilizando mal las propiedades de estilo ya que lo estás haciendo como si fueran atributos de la etiqueta div.

Esto está mal...

Código HTML:

<div width="80%"></div>
Así está mejor...

Código HTML:

<div style="width:80%"></div>
Pero estaría aun mejor si los estilos los definieras dentro de una hoja de estilos (dentro del documento o aparte).

Para centrar un div podrías establecer sus márgenes así:

Código HTML:

#tu_div
{
        margin-left:auto;
        margin-right:auto;
}

PD: También noté que a tu página le falta la etiqueta de apertura de <body>.

Saludos,


Raúl :-)

pasada.net 12/11/2006 09:07

Je Je no se xq no tenia el body abierto :S buena cagada :(

lo he subido a la web http://www.pasada.net/index1.html lo tengo modificado y no logro centrarlo todavia bien :(

elrauli 12/11/2006 09:45

Te paso un ejemplo siguiendo más o menos tu código...

Hoja de estilos:
Código HTML:

#menu
{
        width:80%;
        margin-left:auto;
        margin-right:auto;
}

/*Con esto te queda el tamaño del contenedor a 80% y centrado*/


#fila_1
{
        text-align:center;
}

/*...y con esto otro centrás el contenido de la fila 1*/

Documento:
Código HTML:

<div id="menu">
        <div id="fila_1">
                bla, bla, bla...
        </div>
</div>

Salux!


Raúl :-)

pasada.net 12/11/2006 09:51

te subo ala web las modificaciones q me dijiste ... no veo ningun cambio :(

elrauli 12/11/2006 09:55

Mostrame la hoja de estilos para que te pueda ayudar mejor!

:arriba:

Edito: No me pases nada que ya la estoy viendo!!!

Voy a verlo bien...


Salux!

elrauli 12/11/2006 10:01

A ver si es esto...

Hubo un error de tipeo de mi parte y te puse:

Código HTML:

margint-left:auto;
cuando debí haber puesto:
Código HTML:

margin-left:auto;
en el selector #menu. :borracho:


Cambialo a ver si funciona...

pasada.net 12/11/2006 10:03

y yo fui tan gilipollas de no darme cuenta de que sobraba la t :(

pasada.net 12/11/2006 10:06

sta online puesto pero no se me centra del todo en la pagina no?

elrauli 12/11/2006 11:37

Bueno... lo que sucede es que dentro de la fila 1 el contenido no es un texto sino una lista (elemento de bloque) en la que cada li es de ancho variable y por eso no se puede centrar.

La solución sería esta:

En la hoja de estilos:
Código HTML:

#menu
{
        width:80%;
        margin-left:auto;
        margin-right:auto;
}

#menu ul
{
        margin:0px;
        padding:0px;
        list-style:none;
}

#menu ul li
{
        float:left;
        width:25%;
        margin:0px;
        padding:0px;
        text-align:center;
}

En el documento:
Código HTML:

<div id="menu">
        <div id="fila_1">
                <ul>
                        <li>
                                <a href="h*ttp://w*ww.pasada.net/pau-gasol/"><img border="0px" src="h*ttp://w*ww.pasada.net/pau-gasol/p/20p.jpg" width="80px" height="63px" alt="Pau Gasol" /></a><br />
                                Pau Gasol
                        </li>
                        <li>
                                <a href="h*ttp://w*ww.pasada.net/michelle-lombardo/"><img border="0px" src="h*ttp://w*ww.pasada.net/michelle-lombardo/p/3p.jpg" width="80px" height="91px" alt="Michelle Lombardo" /></a><br />
                                Michelle Lombardo
                        </li>
                        <li>
                                <a href="h*ttp://w*ww.pasada.net/federica-ridolfi"><img border="0px" src="h*ttp://w*ww.pasada.net/federica-ridolfi/p/2p.jpg" width="53px" height="80px" alt="Federica Ridolfi" /></a><br />
                                Federica Ridolfi
                        </li>
                        <li>
                                <a href="h*ttp://w*ww.callejondiagon.com/foro"><img border="0px" src="h*ttp://w*ww.pasada.net/caliz-de-fuego/post/8p.jpg" width="100px" height="135px" alt="Callejon Diagon Foro" /></a><br />
                                Registrate y Participa!!
                        </li>
                </ul>
        </div>
</div>

Probalo y decime si te anduvo...

Saludos,


Raúl


La zona horaria es GMT -6. Ahora son las 21:34.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.