Neste artigo, você aprenderá como alinhar elementos na sua página PageFly.
Etapa 1: selecionar o contêiner do elemento
No nosso exemplo, há uma seção com 2 colunas. Na coluna da direita, temos os elementos Título, Parágrafo e Botão.
Primeiro de tudo, precisamos entender como os elementos estão contidos na página. Por exemplo, selecionamos o elemento Botão e a trilha de navegação mostra seus contêineres: Seção – Linha – Coluna – Botão.
Como queremos alinhar esse botão, precisamos selecionar seu contêiner, que é a coluna na trilha de navegação.
Etapa 2: Alinhar todos os elementos no contêiner selecionado
Antes de seguir as etapas específicas, você pode assistir ao vídeo abaixo
Agora, queremos alinhar ao centro o elemento Botão , selecione a coluna> guia Estilo> seção TIPOGRAFIA> clique no ícone Central em Alinhamento de texto, conforme a imagem abaixo
Etapa 3: Alinhar um elemento específico dentro de um contêiner
Nesse caso, ainda queremos que o cabeçalho e o parágrafo estejam alinhados à esquerda, assim como o seguinte:
- Escolha o contêiner do texto do título, que é o elemento Título.
- Vá até a aba Estilo no Inspetor de Elementos ao lado direito.
- Clique no ícone Esquerda em Alinhamento de texto da seção TIPOGRAFIA.
Faça o mesmo com o parágrafo selecionando Elemento do parágrafo> guia Estilo> seção TIPOGRAFIA> Ícone esquerdo em Alinhamento de texto. Como resultado, você verá algo como a imagem abaixo.
A prioridade das configurações de estilo
Lembre-se de que as configurações de elementos aninhados têm prioridade mais alta que as de seus contêineres. Por exemplo, se você definir o alinhamento da coluna como “centro”, mas o elemento de parágrafo nessa coluna estiver definido como “esquerda”, esse parágrafo será alinhado à esquerda.