I have an issue to center an element in my div.
I’m using display flex, align-self and justify-self to center it.
I think this is ok by this way, but I have an unknown element when I inspect from the web browser.
You can see on the right, there is an as striped element that I don’t know where it come from.
Here is the parent element made with grid.
You can see the issue from the fiddle here
https://jsfiddle.net/Martin40/qtjphvga/3/
Here is my CSS
.customer_card{
background: green;
padding: 10px;
margin-bottom: 20px;
border-radius: 10px;
display: grid;
grid-template-columns: 20% 80%;
gap: 0px 10px;
justify-content: center;
justify-items: stretch;
align-items: center;
}
.customer_card_logo {
display: flex;
position: relative;
justify-self: center;
text-align: center;
background: grey;
border-radius: 50%;
width: 50px;
height: 50px;
color: white;
font-weight: bold;
cursor: pointer;
}
.customer_card_logo > .material-icons-outlined {
align-self: center;
justify-self: center;
font-size: 2rem;
transition: all 0.4s;
}
.customer_card_logo:hover > .material-icons-outlined {
transform: rotate(90deg);
}
.customer_card_name {
display: block;
font-weight: 600;
font-size: 1.5rem;
}
.customer_card_addresse {
font-size: 1.2rem;
}
Here is my HTML
<head><link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet"></head>
<div class="customer_card">
<div class="customer_card_logo"><span class="material-icons-outlined"> autorenew </span></div>
<div class="customer_card_informations">
<span class="customer_card_name">Company Name</span>
<span class="customer_card_addresse">Adresse <br> ZIP CITY NAME</span>
</div>
Anyone know what’s the problem ?
Thank you !
>Solution :
<!-- language: lang-css -->
.customer_card {
background: green;
padding: 10px;
margin-bottom: 20px;
border-radius: 10px;
display: grid;
grid-template-columns: 20% 80%;
gap: 0px 10px;
justify-content: center;
justify-items: stretch;
align-items: center;
}
.customer_card_logo {
display: flex;
position: relative;
justify-content: center;
text-align: center;
background: grey;
border-radius: 50%;
width: 50px;
height: 50px;
color: white;
font-weight: bold;
cursor: pointer;
}
.customer_card_logo > .material-icons-outlined {
align-self: center;
justify-self: center;
font-size: 2rem;
transition: all 0.4s;
}
.customer_card_logo:hover > .material-icons-outlined {
transform: rotate(90deg);
}
.customer_card_name {
display: block;
font-weight: 600;
font-size: 1.5rem;
}
.customer_card_addresse {
font-size: 1.2rem;
}
<!-- language: lang-html -->
<head>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
</head>
<body>
<div class="customer_card">
<div class="customer_card_logo" title="Changer de client"><span class="material-icons-outlined"> autorenew </span></div>
<div class="customer_card_informations">
<span class="customer_card_name">Company Name</span>
<span class="customer_card_addresse">Adresse <br> ZIP CITY NAME</span>
</div>
</div>
</body>
<!-- end snippet -->