1

Olá, eu estou tendo dificuldades para alinhar itens dentro de uma celula criada pelo display: grid.

por exemplo: inserir a descrição da imagem aqui

Nesse exemplo acima eu consigo simplificar a minha dificuldade. Se retirarmos dali o "text-align: center;" o text volta a posição "default", como queira chamar.

inserir a descrição da imagem aqui

Agora, no meu projeto tem essa célula em azul, e gostaria de alinhar essa imagem, que contém dentro desta, no canto direito da célula. SEGUE ABAIXO MEU CODE CSS:

html, body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
    background: rgb(185,187,190);
background: radial-gradient(circle, rgba(185,187,190,1) 0%, rgba(41,43,47,1) 100%); 
}
#chat {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  place-items: center;


}
#chat-container{
    
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
 
    height: 80%;
    width: 80%;
    margin: 0 auto;
    grid-template-rows: 10vh 5vh 60vh !important;
    justify-items: center;
    align-items: center;
    
}
.chat-list{
    
    background:#36393f;
    height: 100%;
    width: 100%;
    grid-column-start: 1;
    grid-column-end:6;
    grid-row-start: 2;
    grid-row-end:99;
    overflow: auto;
    
}

.username-chat{
grid-row-start: 1;
grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end:5 ;
    background: #292b2f;
    height: 100%;
    width: 100%;
    border-radius: 10px 0px 0px 0px;

}
.username-chat > input{
    margin: 15px;
    padding: 5px;
    width: 95%;
    height: 40%;
    outline: none;
    border: none;
    background:#40444b;
    color: white;
    border-radius: 10px 10px 0px 0px;
}
.input-messages{
    
    background:#36393f;
 
    width: 100%;
    height: 100%;
    grid-column-start: 1;
    grid-column-end:6 ;
    border-radius: 0px 0px 10px 10px;
    
    grid-row-end: 100;

    
}
.messages{
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    margin:10px;
}

.input-messages > input{
   margin: 5px;
   padding: 5px;
   width: 70%;
   height: 50%;
   border-radius: 0px 0px 0px 10px;
   outline: none;
   border: none;
   background:#40444b;
   color: white;
}


.send-button-chat{
    
    height: 100%;
    grid-row-start: 99;
    grid-row-end: 100;
    grid-column-start:5;
    grid-column-end:6 ;
   width: 100%;
   border-radius: 10px;
 
   
}
.send-button-chat > button{
    
    border:none;
    color: #b9bbbe;
    background-color: #292b2f;
    border-radius: 0px 0px 10px 0px;
    height: 80%;
    width: 95%;
    font-weight: bold;
    margin: 5px;
    
}
.send-button-chat > button:hover{
    background: #40444b;
}
.logo 
{
background:blue;
width: 100%;
 height: 100%;
 grid-row-start: 1;
 grid-row-end: 2;
 grid-column-start: 5;
 grid-column-end: 6;
 
}
.logo > img{
 
    width: 50px;
    height: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HIG</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
    <link rel="stylesheet" href="style.css">

</head>
<body>
   
    <form id="chat" class="">
    
            <div id="chat-container">
    
                    <div class="username-chat">
                     <input type="text" name="username" placeholder="Your username" autocomplete="off"  autofocus="required">
                    </div>
                 
                     <div class="chat-list">
                         <form id="chat">
                         <div class="messages"></div>
                     </form>
                     </div>
                 
                     <div class="input-messages">
                         <input type="text" name="message" placeholder="Write here" autocomplete="off"  autofocus="required" >
                    
                     </div>
                     <div class="send-button-chat">
                        <button type="submit" >Send</button>
                     </div>
                     <div class="logo">
                         <img src="logochat.png">
                     </div>
                     
                 </div>
           
      
    </form>

3
  • 1
    Olá Mikael. Poderia colocar o código HTML? 22/10/2019 às 14:21
  • Cara só o CSS não ajuda muito, inclui na pergunta o HTML tb
    – hugocsl
    22/10/2019 às 14:23
  • pronto!! adicionei o html 22/10/2019 às 14:36

2 Respostas 2

0

Cara vc tem uma tag img dentro de uma div, basta colocar text-align: right que a img vai para a direita. A imagem é um elemento inline e ela pode ser alinhada com elementos de texto, por isso o text-aling resolve. Então da mesma forma que vc alinhou o texto no centro com text-align:center, vc alinha a imagem na direita com text-align: right. Eu, particularmente, não mudaria o display original do elemento só para fazer um alinhamento desses...

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
    background: rgb(185, 187, 190);
    background: radial-gradient(circle, rgba(185, 187, 190, 1) 0%, rgba(41, 43, 47, 1) 100%);
}

#chat {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    place-items: center;


}

#chat-container {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 2fr;

    height: 80%;
    width: 80%;
    margin: 0 auto;
    grid-template-rows: 10vh 5vh 60vh !important;
    justify-items: center;
    align-items: center;

}

.chat-list {

    background: #36393f;
    height: 100%;
    width: 100%;
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 99;
    overflow: auto;

}

.username-chat {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 5;
    background: #292b2f;
    height: 100%;
    width: 100%;
    border-radius: 10px 0px 0px 0px;

}

.username-chat > input {
    margin: 15px;
    padding: 5px;
    width: 95%;
    height: 40%;
    outline: none;
    border: none;
    background: #40444b;
    color: white;
    border-radius: 10px 10px 0px 0px;
}

.input-messages {

    background: #36393f;

    width: 100%;
    height: 100%;
    grid-column-start: 1;
    grid-column-end: 6;
    border-radius: 0px 0px 10px 10px;

    grid-row-end: 100;


}

.messages {
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    margin: 10px;
}

.input-messages > input {
    margin: 5px;
    padding: 5px;
    width: 70%;
    height: 50%;
    border-radius: 0px 0px 0px 10px;
    outline: none;
    border: none;
    background: #40444b;
    color: white;
}


.send-button-chat {

    height: 100%;
    grid-row-start: 99;
    grid-row-end: 100;
    grid-column-start: 5;
    grid-column-end: 6;
    width: 100%;
    border-radius: 10px;


}

.send-button-chat > button {

    border: none;
    color: #b9bbbe;
    background-color: #292b2f;
    border-radius: 0px 0px 10px 0px;
    height: 80%;
    width: 95%;
    font-weight: bold;
    margin: 5px;

}

.send-button-chat > button:hover {
    background: #40444b;
}

.logo {
    background: blue;
    width: 100%;
    height: 100%;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 5;
    grid-column-end: 6;
    text-align: right;
}

.logo > img {

    width: 50px;
    height: 50px;
    vertical-align:middle
}
<form id="chat" class="">

    <div id="chat-container">

        <div class="username-chat">
            <input type="text" name="username" placeholder="Your username" autocomplete="off" autofocus="required">
        </div>

        <div class="chat-list">
            <form id="chat">
                <div class="messages"></div>
            </form>
        </div>

        <div class="input-messages">
            <input type="text" name="message" placeholder="Write here" autocomplete="off" autofocus="required">

        </div>
        <div class="send-button-chat">
            <button type="submit">Send</button>
        </div>
        <div class="logo">
            <img src="https://unsplash.it/45/45">
        </div>

    </div>

</form>

-1

Peguei seu código e fiz a seguinte mudança:

  • Na sua classe .logo alterei para flex e reposicionei o elemento para o final do bloco.

html, body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
    background: rgb(185,187,190);
background: radial-gradient(circle, rgba(185,187,190,1) 0%, rgba(41,43,47,1) 100%); 
}
#chat {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  place-items: center;


}
#chat-container{
    
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
 
    height: 80%;
    width: 80%;
    margin: 0 auto;
    grid-template-rows: 10vh 5vh 60vh !important;
    justify-items: center;
    align-items: center;
    
}
.chat-list{
    
    background:#36393f;
    height: 100%;
    width: 100%;
    grid-column-start: 1;
    grid-column-end:6;
    grid-row-start: 2;
    grid-row-end:99;
    overflow: auto;
    
}

.username-chat{
grid-row-start: 1;
grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end:5 ;
    background: #292b2f;
    height: 100%;
    width: 100%;
    border-radius: 10px 0px 0px 0px;

}
.username-chat > input{
    margin: 15px;
    padding: 5px;
    width: 95%;
    height: 40%;
    outline: none;
    border: none;
    background:#40444b;
    color: white;
    border-radius: 10px 10px 0px 0px;
}
.input-messages{
    
    background:#36393f;
 
    width: 100%;
    height: 100%;
    grid-column-start: 1;
    grid-column-end:6 ;
    border-radius: 0px 0px 10px 10px;
    
    grid-row-end: 100;

    
}
.messages{
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    margin:10px;
}

.input-messages > input{
   margin: 5px;
   padding: 5px;
   width: 70%;
   height: 50%;
   border-radius: 0px 0px 0px 10px;
   outline: none;
   border: none;
   background:#40444b;
   color: white;
}


.send-button-chat{
    
    height: 100%;
    grid-row-start: 99;
    grid-row-end: 100;
    grid-column-start:5;
    grid-column-end:6 ;
   width: 100%;
   border-radius: 10px;
 
   
}
.send-button-chat > button{
    
    border:none;
    color: #b9bbbe;
    background-color: #292b2f;
    border-radius: 0px 0px 10px 0px;
    height: 80%;
    width: 95%;
    font-weight: bold;
    margin: 5px;
    
}
.send-button-chat > button:hover{
    background: #40444b;
}
.logo 
{
background:blue;
width: 100%;
 height: 100%;
 display:flex;
 
 align-items: center;
 justify-content: flex-end;
 
 
 
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HIG</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
    <link rel="stylesheet" href="style.css">

</head>
<body>
   
    <form id="chat" class="">
    
            <div id="chat-container">
    
                    <div class="username-chat">
                     <input type="text" name="username" placeholder="Your username" autocomplete="off"  autofocus="required">
                    </div>
                 
                     <div class="chat-list">
                         <form id="chat">
                         <div class="messages"></div>
                     </form>
                     </div>
                 
                     <div class="input-messages">
                         <input type="text" name="message" placeholder="Write here" autocomplete="off"  autofocus="required" >
                    
                     </div>
                     <div class="send-button-chat">
                        <button type="submit" >Send</button>
                     </div>
                     <div class="logo">
                         <img src="https://cdn.emojidex.com/emoji/seal/32px.png?1417139983"
                          height="28"
                         >
                     </div>
                     
                 </div>
           
      
    </form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .