如何解决将引导程序 4 中的所有元素居中
我正在尝试构建一个只有几个元素的简单注册表单,我想要 使所有元素居中。
但是当我将它与 bootstrap 结合使用时,我的所有元素都会变小,例如当我有 宽度为 100% 的元素,当使用“居中”类时,它将变为 25%。
谁能帮我弄清楚我应该使用哪个引导程序类来居中所有元素?因为 使用常规 CSS 和引导程序显然不是一个好的组合...... 类似:
.centered {
position: fixed;
top: 50%;
left: 70%;
transform: translate(-50%,-50%);
}
<div class="container center">
* HTML tags goes here.... */
</div>
谢谢。
解决方法
你可以这样做:
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div class="container center centered">
* HTML tags goes here.... */
</div>
如果你想使用纯 css 那么你可以使用类似的东西
<div class = 'layout'>
<div class= 'form'>
</div>
</div>
.layout{
position :fixed;
width : 100vh
height : 100vw;
display : grid;
place-items: center;
}
这将为您解决问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。