HTML Primeiro, criamos uma classe para o
no HTML. Aqui, seguimos as boas práticas, ou seja, nomes sem acentos ou caracteres especiais, garantindo organização e clareza no código. Ficaria assim:Bem-vindo!
Eu sou a Jaine Silva, desenvolvedora Front-end apaixonada por tecnologia!
Como alinhar elementos com Flexbox: Um passo a passo simples e eficaz
HTML Primeiro, criamos uma classe para o
no HTML. Aqui, seguimos as boas práticas, ou seja, nomes sem acentos ou caracteres especiais, garantindo organização e clareza no código. Ficaria assim:html Copiar Editar
Bem-vindo!
Eu sou a Jaine Silva, desenvolvedora Front-end apaixonada por tecnologia!
CSS Agora é a hora de estilizar e alinhar tudo usando Flexbox no CSS. Para isso, seguimos dois passos básicos:Transformamos o container (.apresentacao) em um container flexível com display: flex;. Utilizamos align-items: center; para alinhar os elementos no eixo transversal (vertical, nesse caso). O código CSS fica assim: .apresentacao { display: flex; /* Ativa o Flexbox / align-items: center; / Alinha os itens verticalmente */ } Como funciona esse alinhamento? display: flex;: Torna a classe apresentacao um container flex, ativando o Flexbox. align-items: center;: Centraliza os elementos em relação ao eixo transversal do Flexbox. Isso significa que os itens internos (
e
) são posicionados no meio verticalmente. E pronto! Em apenas duas linhas no CSS, conseguimos alinhar os elementos de forma funcional e elegante.
