如何在自己的行/框中完美对齐文本？答案

【问题标题】：How can I perfectly align text inside its own line/box?如何在自己的行/框中完美对齐文本？
【发布时间】：2019-04-24 23:53:38
【问题描述】：

我知道有很多不同的方法可以对齐盒子内的东西，有变换技巧、显示表、flexbox 等。但是，如果我有一个标签并且我在顶部给它相同的填充侧面和底部，它仍然没有完全居中。我猜这是因为行高。

必须有一种方法可以在字体系列、大小等之间不断地做到这一点，对吧？垂直对齐中心不做任何事情，很糟糕。

body {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
}

.file-input {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: 1;
}

.file-input+label {
  background-color: #3c3c3c;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.75px;
  line-height: normal;
  padding: 0.5em 1em;
  text-transform: uppercase;
  transition: 0.2s background-color ease-in-out;
}

.file-input:focus+label,
.file-input+label:hover {
  background-color: #e53935;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="./index.css" />
  <title>Generate Video Thumbnail</title>
</head>

<body>
  <form>
    <input type="file" name="file-input" id="file-input" class="file-input" />
    <label for="file-input">Choose a file</label>
  </form>
</body>

</html>

PS：看在上帝的份上，没有 JavaScript。

【问题讨论】：

因为每种字体都不同，我认为我们甚至不能在字体系列之间不断地定义，除非你有办法精确这一点
Vertically center text that has no descenders?的可能重复
好吧，我想要的只是将一些文本完美地居中在它自己的框中......这比我认为的要难。我可以通过查看渲染的框高度并将其设置为行高来解决此问题。但这是手动的方式。
我想要的是将一些文本完美地居中放在它自己的框中。 --> 你需要根据什么来完美地定义？你怎么会说它是居中的？因为实际上它完美地以我为中心。
@VeraPerrone 你想过jpy这几个字母吗？还有关于Â Ê ?

标签： css

【解决方案1】：

就这样吧，这就是trick的概念：

.yourLabel{
 height:40px;
 line-height:40px;
 padding:0 5px;
 }

如您所见，响应迅速，适用于任何字体选择。

您可以随意调整填充值，只要高度和行高具有相同的值，就会居中。

垂直对齐不适用于文本输入字段/标签。

你去吧：

https://codepen.io/damPop/pen/WYMqWJ?editors=1100

【讨论】：

是的……但这意味着我需要给它一个高度。真的没有别的办法了吗？我已经知道这个解决方案了。
Vertical-align doesn't work on text input fields/labels. --> 它确实有效，因为这些元素是内联元素
据我所知，这是最一致且最少的解决方案。我以前遇到过这个问题，节省自己的时间。您可以运行 JS 并获取计算值或 offsetHeight 或 clientHeight（请参阅，噩梦已经从这里开始，您将不得不考虑框尺寸属性等），然后在加载时相应地设置行高。更 hacky（虽然我喜欢它），有了这个，你只需要一些适用于各种设备的 CSS 规则。换句话说，爱好项目，我会做JS解决方案，在生产中，上面。
@TemaniAfif，你是对的，它更复杂，抱歉措辞不佳，我发现这个很有见地stackoverflow.com/questions/36848273/…Cheers
我会选择这个解决方案，我只是给它一些时间希望一些 CSS 向导有另一个解决方案。