Question

我知道有很多不同的方法可以对齐框内的内容，其中包括转换技巧，显示表，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。

Answer 1

只需执行此操作，这就是技巧的概念：

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

如您所见，响应式，并且可以使用任何字体选择。

您可以使用填充值，只要高度和线高具有相同的值，它将居中。

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

去那里：

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

如何在其行/框内完全对齐文本？

1 个答案: