Como centralizar o logo em um site no Firefox e Chrome

kahlo · 16/03/2014

Hola, probando una web me he dado cuenta que el logo en Firefox no salía bien centrado como en Chrome, ya he conseguido tenerlo igual en los dos sitios pero ahora lo que no consigo es centrarlo... Además al cambiar el código la caja de búsqueda que aparecía a la derecha del menú se ha desplazado hacía abajo, alguien me puede echar una mano?

Esta es la web: http://bdebelleza.com/

Y esta son las clases CSS del logo:

Inserir CODE, HTML ou PHP:

#logo{width: 80%; margin: 0 auto;}
#logo a{display:block;text-decoration:none;margin:0}
#logo h1,#logo h2{background:#000;font-weight:600;line-height:21px;font-size:21px;color:#fff;font-family:"Droid Serif";-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out;margin:0;padding:15px}
#logo h1:hover,#logo h2:hover{background:#f0f}

Muchas gracias, un saludo.

HTML · 16/03/2014

Hola, puedes modificar estas lineas en tu css:

#logo {
width: 80%;
margin: 0 auto;
text-align: center;
}

#logo a {
display: block;
text-decoration: none;
margin: 0 auto;
max-width: 450px; /*El tamaño de tu logo*/
}

kahlo · 16/03/2014

Gracias compañero, pero acabo de probar y tampoco funciona con ese código... 🙁

lombervid · 16/03/2014

Cambia:

Inserir CODE, HTML ou PHP:

#logo a {
    display: block;
    margin: 0;
    max-width: 300px;
    text-decoration: none;
}

por

Inserir CODE, HTML ou PHP:

#logo a {
    display: block;
    margin: 0 auto;
    max-width: 300px;
    text-decoration: none;
}

yaircaballero · 16/03/2014

kahlo disse:
Hola, probando una web me he dado cuenta que el logo en Firefox no salía bien centrado como en Chrome, ya he conseguido tenerlo igual en los dos sitios pero ahora lo que no consigo es centrarlo... Además al cambiar el código la caja de búsqueda que aparecía a la derecha del menú se ha desplazado hacía abajo, alguien me puede echar una mano?

Esta es la web: http://bdebelleza.com/

Y esta son las clases CSS del logo:

Inserir CODE, HTML ou PHP:

#logo{width: 80%; margin: 0 auto;} #logo a{display:block;text-decoration:none;margin:0} #logo h1,#logo h2{background:#000;font-weight:600;line-height:21px;font-size:21px;color:#fff;font-family:"Droid Serif";-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out;margin:0;padding:15px} #logo h1:hover,#logo h2:hover{background:#f0f}

Muchas gracias, un saludo.

este es el CSS:

#logo{width: 80%; margin: 0 auto;}
#logo a{display:block;text-decoration:none;margin-left: auto;margin-right: auto;}
#logo h1,#logo h2{background:#000;font-weight:600;line-height:21px;font-size:21px;color:#fff;font-family:"Droid Serif";-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out;margin:0;padding:15px}
#logo h1:hover,#logo h2:hover{background:#f0f}

kahlo · 16/03/2014

Muchas gracias a ambos por la respuesta, la primera solución me sirvió :encouragement:

¿Ahora cuál sería la forma correcta para dejarle algo de espacio entre la parte superior de la web y el menú que tiene justo debajo?

Un saludo.

yaircaballero · 16/03/2014

kahlo disse:
Muchas gracias a ambos por la respuesta, la primera solución me sirvió :encouragement:

¿Ahora cuál sería la forma correcta para dejarle algo de espacio entre la parte superior de la web y el menú que tiene justo debajo?

Un saludo.

#header-top {
/* position: relative; */
}

por

#header-top {
/* position: relative; */
margin-bottom: 10px;
}

kahlo · 17/03/2014

Ok, todo perfecto, la caja de búsqueda se me ha descuadrado, a ver si lo puedo arreglar.

Un saludo y muchas gracias. :encouragement:

Como centralizar o logo em um site no Firefox e Chrome

kahlo

HTML

kahlo

lombervid

yaircaballero

kahlo

yaircaballero

kahlo

Tópicos similares