已关闭。此问题需要details or clarity。当前不接受答案。
**想要改进此问题?**添加详细信息并通过editing this post阐明问题。
昨天关门了。
这篇文章是23小时前编辑并提交审查的。
Improve this question
我使用react和bootstrap,然后我试着将html元素居中到页面(页面中间),它完成了,但是在添加导航条到页面后,html元素没有正确居中(滚动条也出现了)。
下面是html标签的结构:
<div>
<nav className="navbar sticky-top">
<span className="navbar-brand h1">Navbar</span>
<span>
<buttonclassName="btn btn-primary">
logout
</button>
</span>
</nav>
<form className="d-flex justify-content-center align-items-center vh-100">
<div className="col-md-6">
<div className="card">
<div className="card-body">
<div className="mb-2">
<input/>
</div>
<div className="mb-3">
<input/>
<div className="form-text">Forgot Password?</div>
</div>
<div className="d-flex">
<button className="btn btn-primary btn-block">Login</button>
</div>
</div>
</div>
</div>
</form>
</div>
css:(我正在使用bootstrap类,但它实际上是css)
display: flex
justify-content: center
align-items: center
height: 100vh
The image shows that the html element is centered
我希望将html元素垂直和水平居中到包含导航栏的页面
在添加导航栏(我不熟悉css或bootstrap)后,我得到的是这个
Image shows html element not centered after adding navbar
3条答案
按热度按时间ia2d9nvy1#
一个好的开始是学习HTML的“布局”内容的分布。
从中可以了解到导航栏“菜单”、主内容“内容”都有一个定义好的栏目。
在下面的链接中有很好的文档。
https://www.w3schools.com/html/html_layout.asp
j5fpnvbx2#
你应该知道关于网页结构或布局.你可以使用这导航标记外面的这主体tag.like
'
bejyjqdl3#
使用左边距50%和右边距50%居中div将使div从右上方居中,但使用自动边距将使其基于中心居中