Question

我知道有一堆帖子可以解决这个问题，但我的情况有所不同。

我有一个颜色调色板（圆圈），当我点击一个圆圈时，我通过添加一个具有after伪元素的类选择器来添加内容（复选标记）：

circle css parent（ul元素）：

.lk-color-chooser__color {
  display: inline-block !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  margin-right: 5px !important;
  cursor: pointer !important;
  opacity: 0.5 !important;
  filter: alpha(opacity=50) !important;
}

子元素（圈子）：

.lk-color-chooser__color:last-child {
  margin-right: 0 !important;
 }

在选择圆圈时，我添加了这个类：

.color__selected {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}
.color__selected:after{
  content: "✔";
  margin-left: 15%;
  top: 20;
  color:#000000;
}

如果未选中，我会删除color__selected并添加此类：

.color__not_selected {
  opacity: 0.5 !important;
  filter: alpha(opacity=50) !important;
}

因此，当点击时，我再次点击时向圆圈添加一个支票我将其删除。

我的问题是添加的复选标记不在圆圈内居中。

以下是代码的plunker。

Answer 1

在圈子的容器中使用position:relative;。

然后为你提供一个设定的高度和宽度position absolute;right:0;left:0;top:0;bottom:0;margin:auto;

这里发生的事情就是你告诉我相对于LI容器采取绝对行动的方法，使用o定位和自动保证金会使这个技术在所有方面都适用。

无论圆圈的大小如何，这都会为你打勾。

.color__selected_black:after {
  content: "✔";
  /* margin-left: 15%; */
  top: 0;
  left: 0;
  color: #FFFFFF;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 12px;
  height: 18px;
  position: absolute;
}
.lk-color-chooser__color {
  position: relative;
  display: inline-block !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  margin-right: 5px !important;
  cursor: pointer !important;
  opacity: 0.5 !important;
  filter: alpha(opacity=50) !important;
}

Answer 2

尝试为此类添加行高，如下所示： Demo link

.lk-color-chooser__color {
  display: inline-block !important;
  width: 30px !important;
  height: 30px !important;
  line-height:30px;
  vertical-align:middle;
  border-radius: 50% !important;
  margin-right: 5px !important;
  cursor: pointer !important;
  opacity: 0.5 !important;
  filter: alpha(opacity=50) !important;
}

CSS中心内容之后由伪元素添加

2 个答案: