.lol1 {
display: flex;
justify-content: center;
}
.none {
width: 200px;
background-color: lightgreen;
height: 80px;
margin: 3px;
border-radius: 10px;
line-height: 1em;
}
.none a {
text-align: center;
text-decoration: none;
color: red;
}
<div class="lol1">
<div class="none"><a href="#">A</a></div>
<div class="none"><a href="#">B</a></div>
<div class="none"><a href="#">C</a></div>
<div class="none"><a href="#">D</a></div>
</div>
将这3个属性添加到.none
display: flex;
align-items: center;
justify-content: center;
[justify-content: center
会将其水平对准中心,align-items: center
使其垂直对准。
.lol1 {
display: flex;
justify-content: center;
}
.none {
width: 200px;
background-color: lightgreen;
height: 80px;
margin: 3px;
border-radius: 10px;
line-height: 1em;
display: flex;
align-items: center;
justify-content: center;
}
.none a {
text-align: center;
text-decoration: none;
color: red;
}
<div class="lol1">
<div class="none"><a href="#">A</a></div>
<div class="none"><a href="#">B</a></div>
<div class="none"><a href="#">C</a></div>
<div class="none"><a href="#">D</a></div>
</div>
另一种解决方法是将margin: auto
放在a
标签上。.none
必须为display: flex
才能工作。
.lol1 {
display: flex;
justify-content: center;
}
.none {
width: 200px;
background-color: lightgreen;
height: 80px;
margin: 3px;
border-radius: 10px;
line-height: 1em;
display: flex;
}
.none a {
margin: auto;
text-align: center;
text-decoration: none;
color: red;
}
<div class="lol1">
<div class="none"><a href="#">A</a></div>
<div class="none"><a href="#">B</a></div>
<div class="none"><a href="#">C</a></div>
<div class="none"><a href="#">D</a></div>
</div>