Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Bug] Alinhando os elementos

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Posicionando mais elementos e atividade Faça como eu fiz: alinhe os elementos

por Ruth Britto Da Silva
| 44.5k xp | 37 posts
Estudante em Tecnologia

Olá pessoal, Utilizei a classe e flexbox + não funcionou, conferi esta igual e não alinha ao centro. o zoom esta 100%

<!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">
    <title>Portifolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class=”apresentacao”>
        <h1>Eleve seu negócio digital a outro nível 
            <strong class="titulo-destaque">com um Front-end de qualidade!
            </strong></h1>
            <p>Olá! Sou Ruth Britto, desenvolvedora 
            Front-end com especialidade em <strong class="titulo-destaque"> React, HTML e
            CSS.</strong> Ajudo pequenos negócios e designers a 
            colocarem em prática boas ideias. Vamos 
            conversar?</p>
            <a href="https://instagram.com/brittoruth">Instagram</a>
            <a href="https://github.com/brittoruht">GitHub</a>
            <img src="./ruth.jpg" alt="">
    </main>
    <footer></footer>
</body>
</html>

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

*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    background-color: #000000;
    color: #F6F6F6;
}

.titulo-destaque{
    color: #22D4FD;
}

.apresentacao {
    display: flex;
    align-items: center;
}
1 resposta
solução!
por Luiz Henrique Silva Dionisio
| 57.4k xp | 13 posts

Bom dia Ruth, tudo jóia? Pelo que percebi rodando o seu código na minha máquina, o erro está na digitação das aspas (" ") da classe "apresentacao" no HTML. Depois de corrigir isso o código funcionou normalmente. Tenho mais uma recomendação, utilize o comando "flex-direction: column" para que os itens fiquem direcionados em formato de coluna. Qualquer dúvida com flexbox, consulte este site https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Abaixo vou deixar o código HTML e CSS que usei. Abraço e bons estudos!

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">
    <title>Portifolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="apresentacao">
        <h1>Eleve seu negócio digital a outro nível 
            <strong class="titulo-destaque">com um Front-end de qualidade!
            </strong></h1>
            <p>Olá! Sou Ruth Britto, desenvolvedora 
            Front-end com especialidade em <strong class="titulo-destaque"> React, HTML e
            CSS.</strong> Ajudo pequenos negócios e designers a 
            colocarem em prática boas ideias. Vamos 
            conversar?</p>
            <a href="https://instagram.com/brittoruth">Instagram</a>
            <a href="https://github.com/brittoruht">GitHub</a>
            <img src="./ruth.jpg" alt="">
    </main>
    <footer></footer>
</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    background-color: #000000;
    color: #F6F6F6;
}

.titulo-destaque{
    color: #22D4FD;
}

.apresentacao {
    display: flex;
    align-items: center;
    flex-direction: column;
}