Como centralizar um código HTML: problema resolvido

WebmasterKing · 18/11/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/11/2014

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

fabiancho · 18/11/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/11/2014

fermolina disse:
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/11/2014

Pon el center dentro del body :encouragement:

diegomvsc2 · 18/11/2014

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

FerMolina · 18/11/2014

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

Inserir CODE, HTML ou 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/11/2014

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

WebmasterKing · 18/11/2014

pugozo24 disse:
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 disse:

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

Inserir CODE, HTML ou 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 disse:
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/11/2014

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

fabiancho · 18/11/2014

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

WebmasterKing · 18/11/2014

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

donde lo agrego amigo?

- - - Actualizado - - -

fabiancho disse:
¿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/11/2014

WebmasterKing disse:
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/11/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/11/2014

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

WebmasterKing · 18/11/2014

eldextherxd disse:
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/11/2014

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

Como centralizar um código HTML: problema resolvido

WebmasterKing

FerMolina

fabiancho

WebmasterKing

Raigor

diegomvsc2

FerMolina

pugozo24

WebmasterKing

eldextherxd

fabiancho

WebmasterKing

eldextherxd

Rafaelini

kanikase

WebmasterKing

junitro

Tópicos similares