[Dúvida] | HTML e CSS: Classes, posicionamento e Flexbox

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Leonardo Braga Sales de Souza

| 61.2k xp | 2 posts

Design de som

Segui a aula mas me deparei com uma diferença, no meu projeto não estou conseguindo centralizar os elementos de texto, dentro da section, com a imagem.

Segue meu código HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="styles/style.css">
    
    <title>Projeto Figma - Portifolio</title>

</head>
<body>

    <header></header>

    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em <strong>React, HTML e CSS.</strong> Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <a href="https://www.instagram.com/vegildo/">Instagram</a>
            <a href="https://github.com/Vegildo/">GitHub</a>
        </section>

        <img src="images/Imagem.png" alt="Imagem retirada do curso alura no Figma">
        <!-- <img src="images/leo.jpeg" alt="Foto de perfil de Leonardo Braga"> -->
        

    </main>


    <footer></footer>
    
</body>
</html>

Segue meu código CSS:

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');

:root {
    font-size: 62.5%; /* Transformando 1rem em 10px */
}

*{
    margin: 0px;
    padding: 0px;
}

body {
    height: 100vh;
    box-sizing: border-box;
    background-color: black;
    color: #F6F6F6;
    font-size: 1.6rem;
}

main.apresentacao {
    margin: 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}

section.apresentacao__conteudo {
    width: 61.5rem;
    height: 48.2rem;
}

h1.apresentacao__conteudo__titulo {
    font-size: 3.6rem;
    font-family: "Krona One", sans-serif;
}

p.apresentacao__conteudo__texto {
    font-size: 2.4rem;
    font-family: "Montserrat", sans-serif;
}

.titulo-destaque {
    color: #22D4FD;
    /* Adicionar mais estilos conforme necessário */
}
a {
    background-color: #22D4FD;
    color: black;
    border: none;
    /* Adicionar mais estilos conforme necessário */
}
/* img { */
    

    /* Adicionar estilos para formatar a imagem */
/* } */

Segue a imagem:

Imagem Resposta Eu achei que com o align-items: center; eu já centralizaria

2 respostas

por Leonardo Braga Sales de Souza

| 61.2k xp | 2 posts

Design de som

07/08/2024

Descobri, o motivo é que quando a altura do section.apresentacao__conteudo é menor que os itens contídos nesse elemento, ele automaticamente volta para o padrão do align-items que é flex-start.

(Acredito que seja isso)

Assim, quando eu retirei o height: 48.2rem; ele voltou a "aceitar" o align-items com valor de center.

CSS:

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');

:root {
    font-size: 62.5%; /* Transformando 1rem em 10px */
}

*{
    margin: 0px;
    padding: 0px;
}

body {
    height: 100vh;
    box-sizing: border-box;
    background-color: black;
    color: #F6F6F6;
    font-size: 1.6rem;
}

main.apresentacao {
    margin: 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}

section.apresentacao__conteudo {
    width: 61.5rem;
}

h1.apresentacao__conteudo__titulo {
    font-size: 3.6rem;
    font-family: "Krona One", sans-serif;
}

p.apresentacao__conteudo__texto {
    font-size: 2.4rem;
    font-family: "Montserrat", sans-serif;
}

.titulo-destaque {
    color: #22D4FD;
    /* Adicionar mais estilos conforme necessário */
}
a {
    background-color: #22D4FD;
    color: black;
    border: none;
    /* Adicionar mais estilos conforme necessário */
}
/* img { */
    

    /* Adicionar estilos para formatar a imagem */
/* } */

Resposta Correta

solução!

por Victor Costa Santos

| 1937k xp | 3733 posts

Alura Scuba Team Monitor de ForumOps

08/08/2024

Olá Leobss!

Fiz alguns teste, e de fato o seu segundo código melhorou bastante o resultado, muito bem!

Mas caso deseje, voce pode adicionar uma classe para a imagem para definir um tamanho adequado. E ajustar as propriedades de flexbox para centralizar corretamente.

Seu código pode ficar assim:

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');

:root {
    font-size: 62.5%; /* Transformando 1rem em 10px */
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    height: 100vh;
    background-color: black;
    color: #F6F6F6;
    font-size: 1.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

main.apresentacao {
    margin: 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

section.apresentacao__conteudo {
    max-width: 61.5rem;
}

h1.apresentacao__conteudo__titulo {
    font-size: 3.6rem;
    font-family: "Krona One", sans-serif;
}

p.apresentacao__conteudo__texto {
    font-size: 2.4rem;
    font-family: "Montserrat", sans-serif;
}

.titulo-destaque {
    color: #22D4FD;
    /* Adicionar mais estilos conforme necessário */
}

a {
    background-color: #22D4FD;
    color: black;
    border: none;
    /* Adicionar mais estilos conforme necessário */
}

img {
    max-width: 100%;
    height: auto;
    margin-left: 2rem; /* Adicione uma margem para separar a imagem do texto */
}

Verifique se funciona também, mas de certa forma o seu código acima, já está bacana.

Espero ter ajudado! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

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