在标签中以文本为中心并使整个标签可点击
我试图样式文件输入按钮，但我遇到了这个恼人的问题使用标签。
这是问题中的按钮，我的第一个问题是如何使文本以标签为中心。我的第二个问题是，当我的光标在按钮的上半部分时，它是可点击的，但另一半不是，我如何才能使整个按钮可点击？
同样重要的是，按钮的位置不奇怪，并且保持与这张图片相同的位置。
我使用引导和自定义CSS文件
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
input[type="file"] {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.custom-file-upload {
background-color: rgb(99, 99, 99);
border-radius: 15px;
border: 1px solid #ccc;
margin: 6px 180px;
cursor: pointer;
}<div class="fixed-bottom bg-secondary container" style="border-radius: 25px 25px 0px 0px;">
<input id="texture-upload" class="pt-2" type="file">
<input id="texture-upload" class="pt-2" type="file">
<label for="texture-upload" class="custom-file-upload">
<p class="text-white text-center pt-2">Select texture folder</p>
</label>
<a class="fixed-bottom text-secondary text-center pb-2">Made with ❤️ by Maloni</a>
</div>回答 5
Stack Overflow用户
发布于 2022-01-30 11:45:12
元素的“边界框”等于元素大小+填充+边框。这取决于您如何设置box-sizing属性-它将决定是否应该考虑填充。页边距不计大小。
布局:使用柔性盒。这是超级灵活(双关意)对齐材料。
您可以将justify-content-center设置为使柔性箱内的元素水平居中，而align-items-center设置为垂直居中。
我简化了您的代码，并添加了对中的内容：
input[type="file"] {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.footer {
border-radius: 25px 25px 0px 0px;
}
.upload {
gap: 10px;
}
.custom-file-upload {
background-color: rgb(99, 99, 99);
border-radius: 15px;
border: 1px solid #ccc;
cursor: pointer;
}<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body class="bg-dark">
<footer class="fixed-bottom bg-secondary container p-2 footer">
<div class="d-flex align-items-center justify-content-center upload">
<input id="texture-upload" class="pt-2 flex1" type="file">
<input id="texture-upload" class="pt-2 flex2" type="file">
<label for="texture-upload" class="p-2 text-white custom-file-upload">Select texture folder</label>
<a class="text-white">Made with ❤️ by Maloni</a>
</div>
</footer>
</body>
</html>
Stack Overflow用户
发布于 2022-01-30 10:10:00
您可以通过将文本设置为绝对，并使用top和left对其进行定位。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
input[type="file"] {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.custom-file-upload {
background-color: rgb(99, 99, 99);
border-radius: 15px;
border: 1px solid #ccc;
height: 50px;
width: 480px;
cursor: pointer;
position: absolute;
}
.custom-file-upload p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}当我们使文本是绝对的，我们将不得不给.custom-file-upload的宽度和高度。我认为它也能解决光标问题。在我的设备里很正常。
这是你想要的输出吗？
Stack Overflow用户
发布于 2022-01-30 10:24:40
考虑使用flex代替网格。更容易集中，
因此，对于自定义的css .container类- display: flex，然后在父类上使用justify-content: center和alignItems:center。将您的cursor: pointer移动到父div i..container，只有标签有它，这就是为什么它是唯一可点击的部分。如果你想要更清晰。编写一个代码，并将其添加到您的初始问题中，我可以自己编辑它。
https://stackoverflow.com/questions/70913573
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号