Cómo centrar un código HTML: problema resuelto

WebmasterKing · 18 Nov 2014

Hola amigos,

Estoy tratando de centrar este código, le pongo esto al principio y al final: <center> </center> por mas que trato de cetrarlo no puedo alguien me da el código para centrar esto?

CODIGO:

HTML:

<center><html>
	<head>
		<style type="text/css">
			
			* {
				margin:0px;
				padding:0px;
			}
			
			#header {
				margin:auto;
				width:500px;
				font-family:Arial, Helvetica, sans-serif;
			}
			
			ul, ol {
				list-style:none;
			}
			
			.nav > li {
				float:left;
			}
			
			.nav li a {
				background-color:#000;
				color:#fff;
				text-decoration:none;
				padding:10px 12px;
				display:block;
			}
			
			.nav li a:hover {
				background-color:#434343;
			}
			
			.nav li ul {
				display:none;
				position:absolute;
				min-width:140px;
			}
			
			.nav li:hover > ul {
				display:block;
			}
			
			.nav li ul li {
				position:relative;
			}
			
			.nav li ul li ul {
				right:-140px;
				top:0px;
			}
			
		</style>
	</head>
	<body>
		<div id="header">
			<ul class="nav">
				<li><a href="">Inicio</a></li>
				<li><a href="">Servicios</a>
					<ul>
							<ul>

							</ul>
						</li>
					</ul>
				</li>
	<li><a href="">Servicios</a>
			
					<ul>
							<ul>

							</ul>
						</li>
					</ul>
				</li>

				<li><a href="">Acerca de</a>
					<ul>
					
					</ul>
				</li>
				<li><a href="">Contacto</a></li>
			</ul>
		</div>
	</body>
</html></center>

FerMolina · 18 Nov 2014

Lo testie y queda centrado.
Eso sí, hay un lío de código en la lista.

fabiancho · 18 Nov 2014

Esta centrado, limpia el cache de tu navegador y mira de nuevo aveces hacemos cambios en nuestras aplicaciones web y no se ven por lo que lo antiguo se queda guardado en nuestra memoria de navegador! 🙂

WebmasterKing · 18 Nov 2014

fermolina dijo:
lo testie y queda centrado.
Eso sí, hay un lío de código en la lista.

pero a mi no me queda centrado amigo??

Raigor · 18 Nov 2014

Pon el center dentro del body :encouragement:

diegomvsc2 · 18 Nov 2014

hahaha se me hace chistoso ver el center afuera de la etiqueta html 😛

FerMolina · 18 Nov 2014

Seguro está cacheado.
Borra el caché de tu navegador, e intenta nuevamente.
Y la etiqueta center, no es necesaria.

Insertar CODE, HTML o PHP:

<html>
    <head>
        <style type="text/css">            
            * {
                margin:0px;
                padding:0px;
            }
            #header {
                margin:auto;
                width:500px;
                font-family:Arial, Helvetica, sans-serif;
            }
            
            ul, ol {
                list-style:none;
            }
            
            .nav > li {
                float:left;
            }
            
            .nav li a {
                background-color:#000;
                color:#fff;
                text-decoration:none;
                padding:10px 12px;
                display:block;
            }
            
            .nav li a:hover {
                background-color:#434343;
            }
            
            .nav li ul {
                display:none;
                position:absolute;
                min-width:140px;
            }
            
            .nav li:hover > ul {
                display:block;
            }
            
            .nav li ul li {
                position:relative;
            }
            
            .nav li ul li ul {
                right:-140px;
                top:0px;
            }
            
        </style>
    </head>
    <body>
        <div id="header">
            <ul class="nav">
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Servicios</a></li>
                <li><a href="#">Servicios</a></li>
                <li><a href="#">Acerca de</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </div>
    </body>
</html>

pugozo24 · 18 Nov 2014

o prueba poniendo la etiqueta <center> y </center> dentro de la etiqueta <html> y </html> :sorrow:

WebmasterKing · 18 Nov 2014

pugozo24 dijo:
o prueba poniendo la etiqueta <center> y </center> dentro de la etiqueta <html> y </html> :sorrow:

ya lo hice y no funciona amigo

- - - Actualizado - - -

FerMolina dijo:

Seguro está cacheado.
Borra el caché de tu navegador, e intenta nuevamente.
Y la etiqueta center, no es necesaria.

Insertar CODE, HTML o PHP:

<html>
    <head>
        <style type="text/css">            
            * {
                margin:0px;
                padding:0px;
            }
            #header {
                margin:auto;
                width:500px;
                font-family:Arial, Helvetica, sans-serif;
            }
            
            ul, ol {
                list-style:none;
            }
            
            .nav > li {
                float:left;
            }
            
            .nav li a {
                background-color:#000;
                color:#fff;
                text-decoration:none;
                padding:10px 12px;
                display:block;
            }
            
            .nav li a:hover {
                background-color:#434343;
            }
            
            .nav li ul {
                display:none;
                position:absolute;
                min-width:140px;
            }
            
            .nav li:hover > ul {
                display:block;
            }
            
            .nav li ul li {
                position:relative;
            }
            
            .nav li ul li ul {
                right:-140px;
                top:0px;
            }
            
        </style>
    </head>
    <body>
        <div id="header">
            <ul class="nav">
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Servicios</a></li>
                <li><a href="#">Servicios</a></li>
                <li><a href="#">Acerca de</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </div>
    </body>
</html>

eso ya lo he borrado y pruebo en diferentes navegadores y sigue igual se reflejan todos los otros cambios menos el de centrado

- - - Actualizado - - -

fabiancho dijo:
Esta centrado, limpia el cache de tu navegador y mira de nuevo aveces hacemos cambios en nuestras aplicaciones web y no se ven por lo que lo antiguo se queda guardado en nuestra memoria de navegador! 🙂

limpie las cookies

eldextherxd · 18 Nov 2014

para centrarlo agrega
#header{
margin: 0 auto;
}
y listo :encouragement:

fabiancho · 18 Nov 2014

¿Solo tienes ese codigo? o tienes mas en la pagina que estas probando?

WebmasterKing · 18 Nov 2014

eldextherxd dijo:
para centrarlo agrega
#header{
margin: 0 auto;
}
y listo :encouragement:

donde lo agrego amigo?

- - - Actualizado - - -

fabiancho dijo:
¿Solo tienes ese codigo? o tienes mas en la pagina que estas probando?

solo ese lo estoy probando en un plugin llamado funnel kit en una landing page

eldextherxd · 18 Nov 2014

WebmasterKing dijo:
donde lo agrego amigo?

pues en tu css
primero quita los center que estan mal colocados y luego
donde esta esto
#header {
margin:auto;
width:500px;
font-family:Arial, Helvetica, sans-serif;
}
que quede asi
#header {
margin: 0 auto;
width:500px;
font-family:Arial, Helvetica, sans-serif;
}
con eso deberias de tener centrado el header.. :encouragement:

Rafaelini · 18 Nov 2014

Voy a parecer un poco gruñón con las siguientes respuestas.

1) Utilizar la etiqueta <center> es completamente obsoleto. Los navegadores prácticamente no la van a entender más. Adicionalmente lo estás utilizando sin definir el doctype, esto lo entienden como html 5 y no 4 transitional que todavía era permitido.

2) Ya te lo corrigieron una cosa muy obvia. Ninguna etiquueta debe de ir por fuera del hrml. De hecho esta ni siquiera debe de ir fuera del body.

3) Ya te pusieron 2 veces la solución correcta. Utilizar margin: auto. Te la puso primero FerMolina, pero no estás entendiendo qué está sucediendo.

Haz un docummento completamente en blanco y pega lo que te puso, pero entiéndelo. Si sigues copiando y pegando a lo loco tienes un frankenstein que no sirve.

kanikase · 18 Nov 2014

Que raro XD de última usa align="center" :ambivalence:

WebmasterKing · 18 Nov 2014

eldextherxd dijo:
pues en tu css
primero quita los center que estan mal colocados y luego
donde esta esto
#header {
margin:auto;
width:500px;
font-family:Arial, Helvetica, sans-serif;
}
que quede asi
#header {
margin: 0 auto;
width:500px;
font-family:Arial, Helvetica, sans-serif;
}
con eso deberias de tener centrado el header.. :encouragement:

amigo sigue igual creo que el problema no es el codigo es la plataforma donde lo estoy poniendo gracias de todos modos

junitro · 18 Nov 2014

el problema debe ser otro puedes probar acá Probar código HTML. Herramientas webmaster :: LaWebera.es

Cómo centrar un código HTML: problema resuelto

WebmasterKing

FerMolina

fabiancho

WebmasterKing

Raigor

diegomvsc2

FerMolina

pugozo24

WebmasterKing

eldextherxd

fabiancho

WebmasterKing

eldextherxd

Rafaelini

kanikase

WebmasterKing

junitro

Temas similares