我在将 div 中的元素居中时遇到问题。
我使用 display flex、align-self 和 justify-self 将其居中。
我认为这样就可以了,但是当我从网络浏览器检查时,我有一个未知元素。
你可以看到右边有一个条纹元素,我不知道它来自哪里。
这是用grid制作的父元素。
您可以从这里的小提琴中看到问题
https://jsfiddle.net/Martin40/qtjphvga/3/
这是我的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;
}
这是我的 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>
有人知道问题出在哪里吗? 谢谢!
“条纹元素”只是您在此处定义的网格间隙(不会导致居中问题):
.customer_card
要使图标居中,请使用
gap: 0px 10px;
替换基于宽度/高度的方法。这样,您就不必担心图标的大小可能导致错位:
padding
尝试下面修改后的代码片段:
.customer_card_logo {
/* width: 50px; */
/* height: 50px; */
padding: 0.5rem;
}
.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;
padding: 0.5rem;
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;
}
您可以在下面找到代码。
<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" 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>
.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 {
width: 100%;
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;
}
.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 -->
在customer_card_logo
上保存了问题。 谢谢!