Cómo centrar el logo en una web en Firefox y Chrome

kahlo · 16 Mar 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:

Insertar CODE, HTML o 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 Mar 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 Mar 2014

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

lombervid · 16 Mar 2014

Cambia:

Insertar CODE, HTML o PHP:

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

por

Insertar CODE, HTML o PHP:

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

yaircaballero · 16 Mar 2014

kahlo dijo:
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:

Insertar CODE, HTML o 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 Mar 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 Mar 2014

kahlo dijo:
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 Mar 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: