gpt4 book ai didi

css - 我怎样才能在自己的行/框内完美对齐文本?

转载 作者:太空宇宙 更新时间:2023-11-04 06:44:30 25 4
gpt4 key购买 nike

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

enter image description here

必须有一种方法可以在字体系列、大小等之间不断执行此操作,对吗? vertical-align center 没有做任何事情,这很糟糕。

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。

最佳答案

就这么干,这就是trick的概念:

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

如您所见,响应式且适用于任何字体选择。

您可以调整 padding 值,只要高度和行高具有相同的值,它就会居中。

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

你去吧:

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

关于css - 我怎样才能在自己的行/框内完美对齐文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53428551/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com