Jump to content
Fórum Script Brasil
  • 0

Como centralizar o bloco de texto no bloco principal? (HTML)


Vitor_2021
 Share

Question

Fala pessoal, não tenho muita experiência com programação mas estou fazendo um projeto pessoal e preciso centralizar o bloco de texto dentro da classe principal. Fiz algumas alterações/testes no código, contudo, não estou conseguindo centralizar o texto no centro, conforme a segunda figura.

Gostaria de manter o estilo responsivo, mostrando apenas uma coluna com o texto em cima da respectiva imagem.

Grato desde já.

Segue o código abaixo:

<html>
<head>
  </head>
  <style>
  
    body {
      margin: 0px;
    }
    
    .wrapper-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, 500px);
      justify-content: center;
    }
    
    .bloco {
      overflow: hidden;
      background-color: none;
      align-items: center;
      text-align: center;
      border-radius: 1rem;
      position: relative;
      margin: auto;
    }
    
    .profile-img {
      align: end;
      width: 240px;
      height: 240px;
      margin-top: 20px;
    }
    .name {
      justify-content: center;
      font-weight: bold;
      font-size: 1.5rem;
    }
    
    .descricao {
      height: 330px; <!--TAMANHO DO BLOCO-->
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto;
      font-size: 20px;
    }
    </style>
    <body>
    <div class="wrapper-grid">
      <div class="bloco">
        <p class="descricao">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <img src='https://images.emojiterra.com/google/android-nougat/512px/1f535.png' alt='profile image' class="profile-img">
      </div>
  
      <div class="bloco">
        <p class="descricao">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <img src='https://icones.pro/wp-content/uploads/2021/04/icone-cercle-rempli-rouge.png' alt='profile image' class="profile-img">
      </div>
  
      <div class="bloco">
        <p class="descricao">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <img src='https://icones.pro/wp-content/uploads/2021/04/icone-cercle-rempli-vert.png' alt='profile image' class="profile-img">
      </div>
            
  </body>
</html>

 

image.thumb.png.e3af312cef57f96b1398b10ec5b9d4bc.png

image.thumb.png.fb6874222d39f2387860798c235e2e6c.png

image.png.384ab62e85211738b95d8ba88b25ea56.png

Edited by Vitor_2021
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

cara você quer deixar cada imagem e discrição com  seu proprio espaço no meio? se sim usar o comando 

<br>

que significa "break" q é basicamente quebrar, ai parte a linha, caso queira aumentar o tamanho do espaço use html

1 minuto atrás, Cyber_People disse:

cara você quer deixar cada imagem e discrição com  seu proprio espaço no meio? se sim usar o comando 

<br>

que significa "break" q é basicamente quebrar, ai parte a linha, caso queira aumentar o tamanho do espaço use html

mas se for alinha texto  tem o comando style

 

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <p style="text-align: center;">
        teste
    </p>
</body>
</html>
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      149.9k
    • Total Posts
      646.8k
×
×
  • Create New...