Question

假设我的字体不能垂直居中，因此即使使用这些样式，示例1和2也会在元素的中心上方渲染：

＆＃13;

div {
  padding: 0.1in;
  background-color: #6C6ECC;
  color: white;
  margin: 0.1in;
  text-align: center;
  font-family:Arial;
}

.tweak {
  vertical-align:-0.1in;
}

＆＃13;

<div class="basis">EXAMPLE 1</div>
<div class="tweak">EXAMPLE 2</div>

＆＃13;

在这个例子中，它们都是正确居中的，但我的目标是让示例2的文本低于元素的垂直中心，而关于元素的所有其他内容在视觉上保持相同。我想纠正字体不正确的垂直对齐方式（字体自然地偏离中心，在正常文本行的中心上方）。

Answer 1

如果您知道文字只有一行，则可以使用height和line-height的组合。否则你需要像position: relative; top: -4px这样的东西（但是这会在你的例子中移动彩色背景，所以你需要一个包裹元素）

＆＃13;

div {
  padding: 0.1in;
  background-color: #6C6ECC;
  color: white;
  margin: 0.1in;
  text-align: center;
  font-family:Arial;
}

.tweak {
  height: 1em;
  line-height: 1.6em;
}
.tweak2 {
  height: 1em;
  line-height: 0.8em;
}

＆＃13;

<div class="basis">EXAMPLE 1</div>
<div class="tweak">EXAMPLE 2</div>
<div class="tweak2">EXAMPLE 3</div>

＆＃13;

如何调整文本的垂直对齐方式以纠正字体的错位？

1 个答案: