Question

通过这个例子来看：

HTML

<input type="checkbox" name="jour_semaine[]" id="lundi" value="Lundi"/>
<label class="checkbox-inline weekday" for="lundi" >L</label>

<input type="checkbox" name="jour_semaine[]" id="mardi" value="Mardi"/>
<label class="checkbox-inline weekday" for="mardi" >M</label>

<input type="checkbox" name="jour_semaine[]" id="mercredi" value="Mercredi"/>
<label class="checkbox-inline weekday" for="mercredi" >W</label>

<input type="checkbox" name="jour_semaine[]" id="jeudi" value="Jeudi"/>
<label class="checkbox-inline weekday" for="jeudi" >J</label>

<input type="checkbox" name="jour_semaine[]" id="vendredi" value="Vendredi"/>
<label class="checkbox-inline weekday" for="vendredi" >V</label>

CSS

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute!important;
  left: -9999px!important;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 40px;
  padding-top:6px;
  margin-bottom:20px;
  cursor: pointer;
  font-family:'arial';
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 0;
  width: 32px; height: 32px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 3px;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: ' '; 
  background:#ccc;
  width:20px;
  height:20px;
  border-radius:3px;
  position: absolute;
  top: 6px; left: 6px;
  font-size: 24px;
  line-height: 0.8;
  color: #000;
  transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
.checkbox-inline{display:inline-block;}
.weekday{text-indent:-29px; margin-right:60px; font-weight:bold; }
.weekday::before{background:none!important;}
.weekday::after{z-index:-1;}

结果

我正在将这封信缩进，以便将它放在我的盒子里面。如您所见，除M和W之外的所有字母都居中。

我尝试了很多font-family而没有任何东西，仍有这种偏移。那里的任何排版大师都可以解释为什么这两个人的行为不同？

请注意，这些是<label>，text-indent设置为负数。

小提琴：https://jsfiddle.net/warface/pLLr8pbq/

Answer 1

除单声道空格字体外，所有字符都有不同的宽度。

您可以设置标签宽度以匹配您的盒子宽度，而不是更改缩进，因为您已经在这些框上设置了确切的宽度，< em>将文本居中，删除文字缩进和左边填充，它应解决所有字母的对齐问题：

[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-top:6px;
  margin-bottom:20px;
  cursor: pointer;
  font-family:'arial';
  width:32px;
  text-align:center;
}
.weekday{margin-right:60px; font-weight:bold; }

https://jsfiddle.net/pLLr8pbq/3/

Answer 2

对于serif和sans-serif字体，我认为字母M和W比其他字母宽，如果使用固定的text-indent值，则不太可能正确地将所有A-Z字母居中。

我建议在字母周围添加一个额外的标记，即<span>M</span>，然后将其设置为绝对位置，并使用transform水平和垂直居中。

.weekday span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

除了其他调整，我已经显着优化了CSS，请参阅下面的更新演示。它还使您能够轻松调整标签的大小和字体大小，字母和灰色背景将始终在水平和垂直方向自动居中。

<强> Updated jsfiddle

.weekday {
  display: inline-block;
  vertical-align: top;
  position: relative;
  cursor: pointer;
  font-family: 'arial';
  width: 32px;
  height: 32px;
  margin-right: 60px;
  font-weight: bold;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 3px;
}

.weekday span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.weekday:after {
  content: '';
  background: #ccc;
  width: 70%;
  height: 70%;
  border-radius: 3px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: all .2s;
  opacity: 0;
  transform: scale(0);
  z-index: -1;
}

input[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

input[type="checkbox"]:checked + .weekday:after {
  opacity: 1;
  transform: scale(1);
}

<input type="checkbox" name="jour_semaine[]" id="lundi" value="Lundi" />
<label class="checkbox-inline weekday" for="lundi"><span>L</span></label>

<input type="checkbox" name="jour_semaine[]" id="mardi" value="Mardi" />
<label class="checkbox-inline weekday" for="mardi"><span>M</span></label>

<input type="checkbox" name="jour_semaine[]" id="mercredi" value="Mercredi" />
<label class="checkbox-inline weekday" for="mercredi"><span>W</span></label>

<input type="checkbox" name="jour_semaine[]" id="jeudi" value="Jeudi" />
<label class="checkbox-inline weekday" for="jeudi"><span>J</span></label>

<input type="checkbox" name="jour_semaine[]" id="vendredi" value="Vendredi" />
<label class="checkbox-inline weekday" for="vendredi"><span>V</span></label>

Answer 3

只是在容器内对齐。试试这个：

.checkbox-inline{display:inline-block; text-align: center;}
.weekday{text-indent:-44px; margin-right:60px; font-weight:bold; }

将你的缩进弄得一团糟，让他们完全处于中心位置。介于-44px和-46px之间的任何东西看起来都是合法的，但是如果你想要像素完美的话，那就去吧！

您的JFiddle

为什么字母M或W缩进与其他字母不同？

3 个答案: