[Dúvida] text-align: center em <div>, <p>, <a> e <img>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Boa tarde, eu apliquei text-align: center; no body e obtive esse resultado, pq <a> e <img> tiveram um resultado diferente de <div> e <p>

OBS: o quadrado vermelho é uma png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div>div</div>
    <a href="">âncora</a>
    <p>parágrafo 2</p>
    <p>parágrafo</p>
    <img src="image.png">
</body>
</html>

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style-type: none;
}

body {
    height: 100vh;
    background-color: white;
    color: black;
    font-size: 1rem;
    font-weight: 400;
    border: 10px solid red;
    text-align: center;
}

p, a, div {
    width: 200px;
    border: 10px solid blue;
}

img {
    width: 150px;
}

Olá Nasser!

A imagem e a âncora estão centralizadas porque elas são elementos que se ajustam ao comando de "centralizar texto", enquanto as outras, como as div e os parágrafos, são maiores e ocupam toda a largura da tela por padrão. Para centralizar esses blocos maiores, você precisa usar margin: 0 auto;, o que vai fazer com que eles também fiquem no meio da página.

Pode fazer uma classe assim:

div, p {
    margin: 0 auto;
}

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

Espero ter ajudado e 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!