Boa tarde,
Vi que a professora usou o text-align na
, classe "principal", e todos os elementos de dentro se alinharam.Não entendi. Não era apenas para a
se alinhar, pois ela é a única filha da section?
Se fosse para o título, imagem, os botões e o texto se alinharem, não teria que colocar o text-align na classe da
?
Eu coloquei o text-align dentro da
e os itens se alinharam.
Não entendi como que se alinharam colocando o text-align na section.
.container {
height: 100vh; /*A altura do container será o tamanho da tela*/
display: grid; /*Os elementos dentro do container serão dispostos por meio do Grid*/
grid-template-columns: 50% 50%; /*Será dividido em 2 colunas e essas 2 colunas terão 50% cada uma*/
}
.principal {
background-image: url("img/background.png"); /*A background-imagem é usado para adionar elementos decorativos na página*/
background-repeat: no-repeat; /*Para que a imagem não se repita*/
background-size: contain; /*Para que a imagem seja exibida por completo dentro do container*/
/*
A propriedade background=size especifica o tamanho da imagem de background.
Existem 4 diferentes sintaxes que podem ser usada com essa propriedade: as palavras chaves ("auto", "cover" and "contain")
background-size: auto - Default value. The background image is displayed in its original size
background-size: cover - Redimensiona a imagem do fundo para cobrir(cover) todo o container, mesmo que tenha que esticar (stretch) a imagem ou cortar um pouco das bordas(edges)
background-size: container - Redimensiona a imagem para ter certeza que a imagem está toda totalmente visível
*/
align-items: center; /*Para alinhar verticalmente os itens internos da classe "principal"*/
}
.conteiner__caixa {
margin: 0 6em;
text-align: center; /*Para alinhas horizontalmente os itens internos da classe "principal"*/
}
