Centra imagen y texto en la cabecera de blogger

Cuando subimos una imagen a la cabecera de nuestro blog se puede presentar uno de estos casos:

1. Que la imagen sea más ancha que la cabecera: En esta caso la imagen se saldrá de la cabecera, y por tanto se debe descartar.
2. Que la imagen tenga el mismo ancho de la cabecera: En este caso la imagen encajará perfectamente, y es una imagen que se puede aceptar ya que no afectará la simetría del blog. Es la opción ideal.
3. Que la imagen sea menos ancha que la cabecera del blog: En esta caso la imagen nos aparecerá, por defecto, en el lado izquierdo. Si queremos que, para un mejor diseño, la imagen aparezca en el centro de la cebecera, debemos efectuar las siguientes modificaciones en nuestra plantilla (tomando como ejemplo un blog diseñado con el Nuevo Diseñador de Plantillas, y la plantilla Picture Window):

Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►

Sin expandir plantillas de artilugios vamos a la sección CSS de la cabecera, e inmediatamente debajo de la siguiente línea:

/* Header
----------------------------------------------- */

...pegamos este código:

.header .widget {
margin-top: 4px;
margin-bottom: 4px;
width: 663px;
padding: 0 95px;
}

• margin-top: 4px; corresponde a la distancia de la imagen al borde superior de la cabecera.
• margin-bottom: 4px; corresponde a la distancia de la imagen al borde inferior de la cabecera.
• width: 663px; corresponde a una imagen con 663 pixeles de ancho.
• padding: 0 95px; corresponde a la distancia entre la imagen y los bordes laterales de la cabecera.

En el ejemplo de este tutorial, la imagen está centrada así: al ancho de la imagen corresponde un padding de 0 95px, con esta plantilla.

Dependiendo del ancho de la imagen (width) podemos centrarla aumentando o disminuyendo la distancia en pixeles (0 95px) entre la imagen y los bordes laterales (padding) de la cabecera, observando la ubicación de la imagen en la Vista previa, antes de guardar plantilla.

Para seguir conservando la simetría en la apariencia de nuestro blog, centramos, dentro de la imagen, el título del blog, así:

Siguiendo hacia abajo en la sección CSS de la cabecera (header), localizamos este código:

.Header h1 {
  font: $(header.font);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

...y le agregamos esta línea:

  text-align:center;

Debiendo quedarnos así:

.Header h1 {
  text-align:center;
  font: $(header.font);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

Observamos Vista previa y guardamos plantilla.

Así se verá el blog: