1
Hello, I’m having difficulties to align items inside a cell created by the display: grid.
for example: 
In this example above I can simplify my difficulty. If we remove the "text-align: center;" the text returns to the "default" position, as you want to call it.
Now, in my project there’s this cell in blue, and I’d like to align this image, which it contains inside this one, in the right corner of the cell. FOLLOW BELOW MY 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>
Hello Mikael. I could put the HTML code?
– XTRADE XTRADE
Face only the CSS does not help much, includes in the question the HTML
– hugocsl
ready!! added html
– Mikael Rodrigues