[Dúvida] desafio 2 - portfolio | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

olá turma e tutores! tudo bem?

segue meu código, gostaria de sugestões para alinhar na parte central a imagem

<!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>Portfolio Patricia Maidana</title>
</head>
<body>
    <header> 
        <img src="Cover02.jpg" alt="Capa do Portfolio" height="200px" width="100%">
    </header>
    <main>  
        <h1 color: white; style="text-align: center;"> 
            Eleve seu negócio digital a outro nível <strong> com um Front-end de qualidade!</strong> </h1>
        <p color: white; style="text-align: center;">
            Sou Patricia Rosa Maidana, desenvolvedora Front-end.</p>
    <img src="foto01.jpg" alt="Foto de Patricia Rosa Maidana" height="300px" width="250px" style="ali"> <br>
        <a href="https://www.linkedin.com/in/patricia-rosa-maidana/">LinkedIn</a>
        <a href="https://github.com/PatyMaidana">GitHub</a>
    
    </main>
    <footer>
        <p>Direitos autorais reservados - © 2024 Patricia Rosa Maidana        </p> 
    </footer>

    </body>
</html>

Oi, Patricia, tudo bem?

Parabéns pelo desenvolvimento do seu portfólio! Você está no caminho certo.

Para alinhar a imagem no centro da página, basta adicionar um style diretamente na tag <img>. O código fica assim:

<img 
  src="foto01.jpg" 
  alt="Foto de Patricia Rosa Maidana" 
  height="300px" 
  width="250px" 
  style="display: block; margin: 0 auto;"
>

O que esse código faz?

display: block; transforma a imagem em um elemento de bloco, o que permite a aplicação de margens para alinhamento.
margin: 0 auto; define as margens laterais como automáticas, o que centraliza o elemento na horizontal.

Para deixar seu código ainda mais organizado, a boa prática é separar o CSS do HTML. Você pode fazer o mesmo para os outros estilos que aplicou no <h1> e no <p>.

Para facilitar seu teste, seu código completo e corrigido fica assim:

<!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>Portfolio Patricia Maidana</title>
</head>
<body>
    <header> 
        <img src="Cover02.jpg" alt="Capa do Portfolio" height="200px" width="100%">
    </header>
    <main>  
        <h1 style="text-align: center;"> 
            Eleve seu negócio digital a outro nível <strong> com um Front-end de qualidade!</strong> 
        </h1>
        <p style="text-align: center;">
            Sou Patricia Rosa Maidana, desenvolvedora Front-end.
        </p>
        <img src="foto01.jpg" alt="Foto de Patricia Rosa Maidana" height="300px" width="250px" style="display: block; margin: 0 auto;"> <br>
        <a href="https://www.linkedin.com/in/patricia-rosa-maidana/">LinkedIn</a>
        <a href="https://github.com/PatyMaidana">GitHub</a>
    </main>
    <footer>
        <p>Direitos autorais reservados - © 2024 Patricia Rosa Maidana</p> 
    </footer>
</body>
</html>

Seria algo nessa linha, senão por favor me manda mais detalhes do seu código e um print de como ta o seu projeto o que é para reparar especificamente, isso vai ajudar a te fornecer uma resposta mais assertiva.

Espero ter ajudado! Bons estudos!

Sucesso ✨