1
resposta

Faça como eu fiz: alinhe os elementos

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iron Maiden</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <main class="apresentacao">
        <H1 class="titulo-blog">Iron Maiden - A história por tras da lenda!</H1>
        <H2 class="titulo-blog2">Iron Maiden - Uma carreira de sucesso</H2>
        <p class="texto-destaque">Em 1980,<strong class="urgente"> o Iron Maiden</strong> já havia conquistado uma
            reputação de ferro fundido por shows ferozes ao vivo e uma legião de fãs ferozmente leais. Inspirado pelo
            heavy rock e temperado pelo calor da crescente New Wave of British Heavy Metal, a ascensão deles culminou em
            uma estreia de álbum autointitulada que imediatamente os elevou acima de seus pares e serviu como prólogo
            para uma história verdadeiramente notável que capturou a imaginação dos amantes da música de todos os
            países, cores e credos. Estampado com a imagem totêmica de <strong class="urgente">Eddie</strong>, uma
            figura macabra, mas inegavelmente bonita e misteriosa, cuja imagem tentadora continuaria a aparecer em todos
            os álbuns e inúmeras camisetas, portanto, não foi nada menos do que uma declaração de intenção inovadora.
            Muitos outros se seguiriam. A resposta entusiasmada ao álbum seguinte, Killers, de 1981, confirmaria a
            crescente suspeita de que esta era uma banda única, e as turnês subsequentes pelo Japão e Estados Unidos,
            bem como pelo Reino Unido e Europa, reafirmariam tanto o apelo internacional do Maiden quanto seu
            compromisso implacável de alcançar os fãs onde quer que eles estivessem.</p>
        <img src="imagem/ironmaiden.jpg" alt="Foto Iron Maiden">
        <H3 class="titulo-blog">Discografia - Albuns de Estudio</H3>
        <ul class="texto-destaque">
            <li>Iron Maiden - 1980</li>
            <li>Killers - 1981</li>
            <li>The Number of the Beast - 1982</li>
            <li>Piece of Mind - 1983</li>
            <li>Powerslave - 1984</li>
            <li>Somewhere in Time - 1986</li>
            <li>Seventh Son of a Seventh Son - 1988 </li>
            <li>No Prayer for the Dying - 1990</li>
            <li>Fear of the Dark - 1992</li>
            <li>The X Factor - 1995</li>
            <li>Virtual XI - 1998</li>
            <li>Brave New World - 2000</li>
            <li>Dance of the Death - 2003</li>
            <li>A Matter of life and Death - 2006</li>
            <li>The Final Frontier - 2010</li>
            <li>The Book of Souls - 2015</li>
            <li>Senjutsu - 2021</li>
        </ul>
    </main>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;    
  }

.apresentacao {
    display: flex;
    align-items: center;
}
  
.texto-destaque {
    color: white;
}

.titulo-blog {
    color: red;
}

.titulo-blog2 {
    color: #007BFF;
}

.urgente {
    color: red;
}

p {
    margin: 10px;
    border: 2px solid white;
    padding: 5px;
}

/*margin (Margem): A parte mais interna da caixa, é um espaçamento tanto superior e inferior como lateral também;
  border (Borda): O perímetro da caixa. As bordas podem ser invisíveis ou podem ser uma linha colorida.
  padding (Preenchimento): O espaço interno entre o conteúdo e a borda da sua caixa.
  content (Conteúdo): A parte mais interna da caixa. O conteúdo pode ser uma imagem, texto, cabeçalho ou qualquer outra coisa.*/
1 resposta

Olá, Fabio, como vai?

A criação da classe apresentacao no HTML e a aplicação do Flexbox no CSS para alinhar os elementos estão corretas. O uso de display: flex e align-items: center centraliza os itens de forma eficiente, como solicitado.

Parabéns pelo trabalho! Continue praticando e explorando as possibilidades do Flexbox para criar layouts cada vez mais interessantes. O fórum está à disposição para mais dúvidas ou compartilhamento de projetos.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!