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

Centralizar a imagem em CSS

por Celso Bitello
| 29k xp | 14 posts
Auxiliar de TI

Olá boa noite!

Gostaria de uma ajuda pois estou tentando criar um site e não consigo encontrar uma maneira de centralizar a imagem da maneira desejada!

Aqui estão a imagem e os códigos do que está acontecendo:

<!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>Chapéus de Palha</title>
    <link rel="stylesheet" href="./Styles/styles.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho_menu">        
        </nav>
    </header>

    <main class="apresentacao">
        <section class="apresentacao_conteudo">
            <h1 class="apresentacao_conteudo_titulo">Os Mugiwaras!</h1>
    
    <!--Imagem do Bando-->
    <p class="apresentacao_conteudo">Esse site foi criado para explicar um pouco de cada
        membro do grupo dos <strong class="titulo_destaque">Chapéus de Palha</strong class>, 
            e sobre suas histórias.</p>

    <a class="apresentacao_bando">
        <img class="apresentacao_imagem" src="./fotos/Imagem_Bando.jpg" alt="Foto do bando completo"> </a>
            <h2 class="apresentacao_conteudo_subtitulo">
                Escolha um dos cartazes abaixo para ver mais do membro do bando!</h2>
        </section>
    </main>
    <footer>
        <p>Desenvolvido por Celso.</p>
    </footer>
</body>
</html>

    @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');
     
     :root {
        --cor--primaria: #C6FAF6; 
        --cor--secundaria: #000404;
        --cor--terciaria: #0BE73A;
    }

    * {
        margin: 10;
        padding: 0;
    }

    body {
        box-sizing: border-box;
        background-color: var(--cor--primaria);
        color: var(--cor--secundaria);
    }

    .apresentacao {
        padding: 1.5% 10%;
        display: flex;
        align-items: center;
    }

    .apresentacao_conteudo_titulo {
        padding: 3% 46%;
        font-size: 3.25rem;
        width: 345px;
        align-items: center;
        font-family: 'Roboto Condensed', sans-serif;
    }

    .apresentacao_conteudo {
        align-items: center;
        width: 100%;

    }

    .titulo_destaque {
        color: darkviolet;
    }

![https://cdn.discordapp.com/attachments/877369611480358942/1134297712335011911/aaaa.png]

Meu desejo é que a imagem e o texto encima dela fiquem centralizados, porém não descubro o por que não consigo. Desde já agradeço!

1 resposta
solução!
por Luis Dias
| 2649k xp | 2289 posts
Developer PHP (⌐■_■)

Oi, Celso

Ajustei a formatação com indentação


<!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>Chapéus de Palha</title>
    <link rel="stylesheet" href="./Styles/styles.css">
</head>

<body>
    <header class="cabecalho">
        <nav class="cabecalho_menu">
        </nav>
    </header>

    <main class="apresentacao">
      <section class="apresentacao_conteudo">
          <h1 class="apresentacao_conteudo_titulo">Os Mugiwaras!</h1>
          
          <p class="apresentacao_bando">
              Esse site foi criado para explicar um pouco de cada membro do grupo dos 
              <strong class="titulo_destaque">Chapéus de Palha</strong>, e sobre suas histórias.
          </p>

          <!-- Imagem do Bando -->
          <img class="apresentacao_imagem" src="./fotos/Imagem_Bando.jpg" alt="Foto do bando completo" /> 

          <h2 class="apresentacao_conteudo_subtitulo">
              Escolha um dos cartazes abaixo para ver mais do membro do bando!
          </h2>
      </section>
  </main>
  <footer>
      <p>Desenvolvido por Celso.</p>
  </footer>
</body>
</html>

Limpei o CSS


@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');
  
:root {
    --cor--primaria: #C6FAF6; 
    --cor--secundaria: #000404;
    --cor--terciaria: #0BE73A;
}

* {
    margin: 10;
    padding: 0;
}

body {
    box-sizing: border-box;
    background-color: var(--cor--primaria);
    color: var(--cor--secundaria);
}

.apresentacao {
    padding: 1.5% 10%;     
}   

.apresentacao_conteudo {
    width: 100%;
    text-align: center;
}

.apresentacao_conteudo_titulo {        
    font-size: 3.25rem;            
    font-family: 'Roboto Condensed', sans-serif;
}

.titulo_destaque {
    color: darkviolet;
}