如何解决内容在 <main> 中水平和垂直居中 部分不在整页上
所以我已经在 <header>
部分创建了一个导航栏,并在我的网站上创建了一个页脚。我的 <div class="UUDiv">
部分还有一个带有段落和标题的 <main>
。现在,我想水平和垂直居中 <div class="UUDiv">
但只在主要部分。使用下面的代码,我只将它放在整个页面的中心,所以我的 Div 与我的页脚重叠......这是我的代码:\
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
display: flex;
flex-direction: column;
}
.UUDiv {
text-align: center;
position: absolute;
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
}
<header class="RestHeader">
<nav class="navigation">Navigation...with
<ul>
<li> List </li>
</ul>etc.</nav>
</header>
<main>
<div class="UUDiv">
<h1>Headline</h1>
<p>Text</p>
</div>
</main>
<footer>
<div class="footer">Footer...with
<ul>
<li> Another List </li>
</ul> etc.</div>
</footer>
感谢您的帮助!
解决方法
试试下面的代码片段。
html {
min-height: 100%;
}
body {
margin: 0;
min-height: 100%;
display: flex;
flex-direction: column;
}
.UUDiv {
text-align: center;
display:flex;
justify-content:center;
align-items:center;
}
ul{
display:flex;
list-style:none;
}
ul li{
margin-left:1rem;
}
<header class="RestHeader">
<nav class="navigation">Navigation...with
<ul>
<li> List </li>
<li> List </li>
</ul>
</nav>
</header>
<main>
<div class="UUDiv">
<h1>Headline</h1>
<p>Text</p>
</div>
</main>
<footer>
<div class="footer">Footer...with
<ul>
<li> Another List </li>
<li> Another List </li>
</ul>
</div>
</footer>
您可以使用 flexbox 代替绝对定位您的 div。
给您的 @Get('/company')
public async getCompanyNews(
@Query() query: PaginationDto
) {
console.log(typeof query.page);
一个 <main>
并将其内容居中,如下所示:
display: flex
然后它会在您的 main {
display: flex;
align-items: center;
justify-content: center;
}
.UUDiv {
text-align: center;
}
内居中。
完整示例:
<main>
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
display:flex;
align-items:center;
justify-content:center;
}
.UUDiv {
text-align: center;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。