Como alinhar a imagem, o título e a descrição no cabeçalho do blog (1)

Tem havido uma série de questões levantadas sobre o alinhamento das imagens do cabeçalho. Em alguns casos, as fotos são ou não centralizadas, ou não podem ser deslocadas para a esquerda ou à direita do cabeçalho. Espero que este artigo possa ajudar você a ter mais controle sobre a posição da imagem. Irei explicar como conseguimos alinhar a imagem do cabeçalho nos diferentes modelos do Blogger. Para completar, também discutiremos como o título e a descrição podem ser centralizados ou alinhados para o lado do cabeçalho.

Para esclarecer, se você tiver escolhido para que a imagem apareça "Atrás do título e da descrição", o título e a descrição segue a imagem onde quer que vá. Se você quiser o título do lado esquerdo do cabeçalho e a imagem do lado direito, a maneira mais fácil é você criar uma imagem grande, usando um editor de imagem, colocar o título e salvar como uma imagem composta. Desta forma, o título e a descrição ficarão exatamente onde você quer que eles fiquem. Fazer upload de imagem para o cabeçalho e para o posicionamento, escolha "Em vez de título e descrição".

Lembre-se de clicar em "Visualizar" após as alterações ao modelo. Só depois que estiver satisfeito com as configurações que você deve clicar em "Salvar Modelo".

Modelo Mínima

No modelo de Mínimos, o título e a descrição são automaticamente alinhados ao centro. Se você quer que eles sejam, à esquerda do cabeçalho, alterar o código de alinhamento (mostrada em verde):

#header {

text-align: center;

Para alinhar à esquerda, troque por text-align: left;

Para alinhar à direita, use text-align:right;

A imagem de cabeçalho que é carregada também permanece no centro do cabeçalho. Se você quer que ele seja mais alinhado, por exemplo, vá até essas linhas e mude o "auto" na margem esquerda com uma largura fixa:

#header-inner {

background-position: center;

margin-left: 100px ;

margin-right: auto;

} 

Para a imagem a ser da extrema direita do cabeçalho, você pode alterar a margem direita para 0px:

margin-left: auto;

margin-right: 0px ;

Modelo Denim

O título Denim e descrição estão à esquerda do cabeçalho. Para ter o título de cabeçalho no centro, insira o código de alinhamento (mostrada em verde):

h1.title {

text-align: center; 

 

Para a descrição a ser no centro, adicione o código de alinhamento (em verde):

#header .description {

text-align: center; 

 Quanto à imagem de cabeçalho, é alinhado à esquerda. Para mover a imagem para o centro ou da direita, localize / * Cabeçalho / e cole esse código abaixo dela:

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

} 

Da mesma forma, se você quiser que a imagem seja mais próxima à direita, insira uma determinada margem esquerda em vez de deixá-lo "auto", assim:

margin-left: 200px ;

 

A imagem também pode ser no canto direito do cabeçalho, se você definir a margem direita para 0px:

margin-left: auto;

margin-right: 0px ;

Template Rounders 

O título e a descrição são automaticamente alinhados à esquerda.  Você pode ter o título de cabeçalho no centro, adicionando este código (mostrado em verde):

#header h1 {

text-align: center;

 

Para a descrição a ser no centro, você pode inserir o código de alinhamento aqui:

#header .description {

text-align: center;

Caso você queira uma posição específica para o título e descrição, você também pode definir as margens esquerda ao invés, por exemplo:

#header h1 {

margin-left: 200px;

A imagem enviada no cabeçalho é alinhado à esquerda. Você pode ter a imagem no centro, adicionando o código:

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}

Para mover a imagem para a direita, mudar o "auto" na margem esquerda para um valor fixo como este:

margin-left: 200px ;

 

Você pode ter a imagem da direita, definindo a margem direita para 0px:

margin-left: auto;

margin-right: 0px ;