Centrar navegador

[gorkaroke]

Buenas tardes a todos:

Estoy construyendo mi primera página web y me estoy encontrando con un problema que espero alguien me pueda ayudar a solucionar...

Quiero centrar la caja de navegador y los iconos de las redes sociales en la cabecera del site, pero no me respeta las posiciones en distintas pantallas. He hecho modificaciones en la CSS para posicionar estos elementos a ojo en mi ordenador, pero cuando se entra a la página web desde ordenadores con pantallas de otras resoluciones, la ubicación de los elementos es distinta.

¿Existe alguna manera de bloquearlos en el centro?

Esta es mi página web: www.recetasparaprincipiantes.com

A ver si alguien me puede decir algo!

Muchas gracias por adelantado!

[robert_98]

Hola, gorkaroke, debes usar medidas relativas para poder hacer que los componentes de tu web se estiren o se "achiquen", y sobre lo de centrar, te recomiendo usar display flex,
!OJO!
Display FLEX, es una propiedad relativamente nueva en CSS, algunos navegadores viejos no lo mostraran bien, y tendras que usar los prefijos para cada navegador.

Para hacer que tu layout sea relativo a la pantalla, es con este tipo de codigo:

Código CSS:

.header{
    width: 100%; height: 100%;
}
 

Como puedes ver las medidas reltivas son con porcentajes, hay mas medidas relativas, pero tu despues investigas...

El contenedor donde quieras tener tus cosas centradas, es asi:

Código CSS:

.contenedor{
    display: flex;
    justify-content: center;
    align-items: center;
}
 

Los hijos del elemento ".contenedor" estaran centrados vertical como horizontalmente.

Espero que te haya servido, no olvides que puede ser que des una investigadita sobre el flexbox y el responsive design, hasta luego.