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!
Respuestas
Aunque suena ridículo, a veces centrar cosas con CSS es muy difícil o casi imposible (por suerte, tecnologías muy modernas como "flexbox" han solucionado estos problemas, pero no lo soportan todos los navegadores).
En tu caso, centrar los iconos de las redes sociales sería sencillo. Este es tu código original:
<div class="social-block span5"> ... </div>
Lo primero que tienes que hacer es quitar la clase span5:
<div class="social-block"> ... </div>
Y lo segundo sería aplicar un nuevo estilo al selector social-block:
.social-block { text-align: center; }
Lo que no entiendo es a qué te refieres con "centrar la caja del navegador".
@javiereguiluz
Hola, revisando el código de tu web puede recomendarte agregarle a la clase .social-block lo siguiente
.social-block{ text-align: center !important; }
Con "!important" para que ignore otras reglas y remover el float: left ya que en la vista móvil aparece muchas veces es por ello que no quedan centrado, también sería recomendable en el margin se use algo similar a lo siguiente para que se muestre centrado.
.social-block{ margin: 10px auto; }
@lmar_copl