时间戳

首页 > 解决方案 > 如何将文本相对于另一个文本的单个字母居中？

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

问题描述

我有两封信。一个是“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

标签： htmlcss

解决方案

这是我为您制定的解决方案。您可以检查它是否有效，因为我使用的百分比和em值都取决于 M 字母的大小。您可以使用它并减小.big-letterspan 的字体大小，它将全部以任意大小对齐。::before我们通常使用和选择器，而不是使用两个跨度（两个其他标签）来形成一个元素::after。

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

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>

我希望这对你有所帮助。

PS我更新了你可以看到它改变的片段。

推荐阅读