html - 如何使文本相对于另一个文本的单个字母居中？

Question

我有两封信。一个是非常大字体的“M”。另一个是个位数。我希望数字与文本重叠并以 M 居中，并使它们在任何字体大小下都以相同的相对比例保持对齐，就好像它们是一个字符一样。我也不希望数字占用以下文本行中的任何空间。 M 也应该能够保持内联，而不会导致换行。这可能吗？

我一直在尝试使用按 em 单位缩放的负边距，但两个字母仍然没有对齐。

<span style="font-size:200%;"><!-- arbitrary font size for testing to make sure it scales --><span style="margin-right:-1ch;"><span style="font-size:500%; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none;">M</span><span style="top:-1px; left:-2em; position:relative; color:blue; display:inline-block;">1</span>
</span></span>test text to make sure the 1 doesn't take up space

Answer 1

这是我为您制定的解决方案。您可以检查它是否正常工作，因为我使用了百分比和 em 值，它们都取决于 M 字母的大小。您可以使用它并减小 .big-letter 跨度的字体大小，它会以任何大小对齐。我们通常使用 ::before 和 ::after 选择器，而不是使用两个 span(另外两个标签)来构成一个元素。

如果您想保留修改该字母内该数字值的机会，我建议使用以下结构:

let test = document.getElementById('test');
let fontSize = window.getComputedStyle(test, null).getPropertyValue('font-size');

let increment = document.getElementById('increment');
increment.addEventListener('click', () => {
	fontSize = (parseFloat(fontSize) + 4) + 'px';
	test.style.fontSize = fontSize;
});

let decrement = document.getElementById('decrement');
decrement.addEventListener('click', () => {
	fontSize = (parseFloat(fontSize) - 4) + 'px';
	test.style.fontSize = fontSize;
});

#test {
  font-size: 16px;
  margin-top: 20px;
}

.big-letter {
  font-size: 200%;
  margin-right: -0.2em;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
}

.big-letter span {
  content: '1';
  font-size: 40%;
  position: absolute;
  bottom: 11%;
  left: 40%;
  color: blue;
}

#increment {
  position: fixed;
  top: 10px;
  left: 65px;
}

#decrement {
  position: fixed;
  top: 10px;
  left: 155px;
}

<div id="test">
  <span class="big-letter">
    M
  </span>
  <span class="big-letter">
    M
    <span>
      2
    </span>
  </span>
  test text to make sure the 1 doesn't take up space
  <button id="increment">
    increment
  </button>
  <button id="decrement">
    decrement
  </button>
</div>

希望对你有所帮助。

附言我更新了您可以看到它发生变化的代码段。