Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Link com a propriedade height

Queria entender o comportamento dessa propriedade height. Estilizando igual a professora temos um resultado similar ou igual ao Figma.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Quando eu incluo a definição dessa propriedade height no css, igual ao Figma, a estilização fica fora do esperado. FIGMA:

width: Fixed (280px)px;
height: Fixed (79px)px;
top: 681px;
left: 692px;
padding: 16px 0px 0px 0px;
gap: 16px;
border-radius: 16px 0px 0px 0px;
opacity: 0px;

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Mesmo utilizando o text-align: center; aparentemente o texto não fica no meio, não entendi o comportamento.

1 resposta
solução!

Olá Iago!

A propriedade height define a altura de um elemento. Quando você define um valor fixo para a altura (por exemplo, height: 79px;), o conteúdo dentro desse elemento pode não se comportar como esperado se o conteúdo for maior ou menor que a altura definida. Isso pode causar problemas de alinhamento, especialmente se você estiver tentando centralizar o texto dentro do botão.

No seu caso, você mencionou que o texto não está centralizado verticalmente, mesmo utilizando text-align: center;. Isso acontece porque text-align: center; apenas centraliza o texto horizontalmente. Para centralizar o texto verticalmente, você pode usar a propriedade flexbox.

Aqui estão duas abordagens que você pode tentar:

Utilize o Flexbox para centralizar o conteúdo tanto horizontalmente quanto verticalmente.

.apresentacao__links__link {
    background-color: #22D4FD;
    width: 280px;
    height: 79px; /* Definindo a altura fixa */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    border-radius: 16px;
    font-size: 24px;
    font-weight: 600;
    padding: 0; 
    text-decoration: none;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
}

Essas abordagens devem centralizar o texto no botão, mas recomendo seguir o método utilizado em aula. O Figma muitas vezes passa parâmetros que se aplicam ao seu próprio contexto. Ao transferir para o código, diferentes monitores podem gerar resultados variados, especialmente ao usar medidas como PX, ao decorrer das aulas, você vai aprender vai sobre medidas flexíveis.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!