主页 / 问题 / 1170895
Accepted
Kirill Peace
Asked:2020-08-27 02:13:33 +0000 UTC2020-08-27 02:13:33 +0000 UTC

居中元素不会居中 - 如何解决？

  • 772

HTML：

<label class="label">
  <span class="label-span label-span-selected"></span>
</label>
<label class="label">
  <span class="label-span"></span>
</label>
<label class="label">
  <span class="label-span"></span>
</label>

CSS：

.label{
  margin: 0 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background-color: #fff;
  border-radius: 50%;
}
.label-span{
  display: block;
  width: 16px;
  height: 16px;
  background-color: #777;
  border-radius: 50%;
}
.label-span-selected{
  background-color: #333;
}

当我放大页面（CRTL +）时，标签跨度在浏览器中变得弯曲（以不同的比例）： 不同尺度的标签跨度位置

它看起来不像我们想要的那样，但似乎我写的一切都是正确的，所以我向有经验的同事请教如何避免这种情况？

html

1 个回答

  1. Best Answer

    比如像这样（我特意把背景颜色改成红色，这样在网站的白色背景上也能看到）：

    .label{
  display: inline-block;
  margin: 0 3px;
  width: 20px;
  height: 20px;
  padding: 2px;
  background-color: red;
  border-radius: 50%;
}
.label-span{
  display: block;
  width: 100%;
  height: 100%;
  background-color: #777;
  border-radius: 50%;
}
.label-span-selected{
  background-color: #333;
}
    <label class="label">
  <span class="label-span label-span-selected"></span>
</label>
<label class="label">
  <span class="label-span"></span>
</label>
<label class="label">
  <span class="label-span"></span>
</label>

    • 3

相关问题