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

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 设置为负值。

Fiddle : https://jsfiddle.net/warface/pLLr8pbq/

Answer 1

只是容器内的对齐问题。试试这个：

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

调整你的缩进，让它们正好在中心。 -44px 和 -46px 之间的任何东西似乎都是合法的，但如果你想成为 pixel-perfect，就去做吧！

你的JFiddle

Answer 2

除 mono-space 字体外，所有字符都有不同的宽度。

与其努力改变缩进，因为您已经在这些框上设置了准确的宽度，您可以设置标签宽度以匹配您的框width, center your text, and remove your text-indent and left-padding 它应该可以解决你的问题所有字母的对齐问题：

[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 3

我认为字母 M 和 W 只是比衬线和 sans-serif 字体的其他字体宽，如果您使用固定的 text-indent 值，那就是不太可能将所有 A-Z 个字母正确居中。

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

.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>

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

Why letter M or W indent are different than other letters?

html

css

typography