我需要你的幫助。我有頁面的三個部分：header, main, footer。我嘗試使main塊居中，使其位于中心并偏離header150 像素。我正在嘗試使用position. 事實是我無法將塊居中，當我嘗試偏離 時header，我的footer塊消失了。請告訴我如何將塊居中以main使footer塊不會消失并且始終位于底部。非常感謝你
html
<div *ngIf="fullArticle">
<header class="img_header">
<img src="{{fullArticle?.imageUrl}}">
</header>
<main class="article_details_content">
<div>{{fullArticle?.title}}</div>
<div>{{fullArticle?.summary}}</div>
</main>
</div>
<footer class="footer" (click)="backToHomePage()">
<mat-icon>west</mat-icon>
Back to homepage
</footer>
scss
.img_header{
position: relative;
width: 100%;
height: 217px;
img{
width: 100%;
height: 100%;
}
}
.article_details_content{
position: absolute;
left: 50%
right: 50%
width: 1290px;
height: auto;
background-color: brown;
}
.footer{
position: fixed;
bottom: 0;
}
uj5u.com熱心網友回復：
最好不要為此使用定位，如果您稍微更改模板，您可以像這樣實作它：
html:
<div *ngIf="fullArticle" class="fullArticle">
<header class="img_header">
<img src="{{fullArticle?.imageUrl}}">
</header>
<main class="article_details_content">
<div>{{fullArticle?.title}}</div>
<div>{{fullArticle?.summary}}</div>
</main>
<footer class="footer" (click)="backToHomePage()">
<mat-icon>west</mat-icon>
Back to homepage
</footer>
</div>
scss：
.fullArticle {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.img_header{
width: 100%;
height: 217px;
}
.article_details_content{
flex-grow: 1;
}
uj5u.com熱心網友回復：
如果你的意思是水平居中，你幾乎擁有它。您的樣式將 div 的左邊緣定位在頁面的中心，現在您只需將元素相對于其參考點移動，使用transform: translateX(-50%);它將向左移動其寬度的 50%。如果您希望它與標題重疊，請添加負上邊距。
這是一個作業示例：
.img_header {
position: relative;
width: 100%;
height: 217px;
}
.img_header img {
width: 100%;
height: 100%;
}
.article_details_content {
position: absolute;
left: 50%;
right: 50%;
width: 80%;
height: auto;
background-color: brown;
transform: translateX(-50%);
margin-top: -150px;
}
.footer {
position: fixed;
bottom: 0;
}<div *ngIf="fullArticle">
<header class="img_header">
<img src="https://via.placeholder.com/100">
</header>
<main class="article_details_content">
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id laoreet mi. Nam posuere dictum odio non tristique. Morbi risus enim, laoreet sed viverra in, rutrum id tortor. Integer ac sem posuere, volutpat ex rutrum, malesuada sapien. Pellentesque
laoreet leo elit, quis mollis velit pulvinar in. Nunc a vehicula ante. Maecenas tristique leo vel dui finibus aliquam. Phasellus rhoncus sagittis fringilla. Aliquam id est congue metus lacinia aliquet. Proin ultrices imperdiet tempor. Donec iaculis
lectus ligula, in efficitur dui dictum vestibulum. Aenean scelerisque ut massa ut sollicitudin. Cras dapibus ex vel neque accumsan tincidunt. Integer in magna iaculis, laoreet ipsum in, semper massa. Suspendisse porttitor, justo ut porttitor vestibulum,
sapien elit mollis orci, nec tincidunt turpis lorem nec velit. Morbi magna magna, ultrices quis elit ac, gravida placerat dolor. Integer faucibus vehicula velit non vestibulum. Integer mollis risus sed vestibulum pretium. Morbi quis lacus lobortis,
egestas risus sed, venenatis eros.
</div>
</main>
</div>
<footer class="footer" (click)="backToHomePage()">
<mat-icon>west</mat-icon>
Back to homepage
</footer>uj5u.com熱心網友回復：
剛剛在 StackOverflow 上開了一個新帳戶，暫時無法發表評論。但我想澄清一下你想要做的事情。
- 你想水平居中還是垂直居中主塊？
- “中心”是什么意思？你的意思是在網頁中間？
- 頁腳似乎只覆寫了網頁的左下角；即使滾動，您是否希望頁腳位于主塊和頁眉的頂部？
#解決方案？#
似乎您希望標題位于背景上，主塊位于標題頂部，但主塊必須在標題結束前大約 157px 開始。所以這里是scss。
.img_header{
position: absolute;
width: 100%;
height: 217px;
img{
width: 100%;
height: 100%;
}
}
.article_details_content{
position: absolute;
top: 157px;
left: 10%;
right: 10%;
width: 80%;
height: 50vh;
background-color: brown;
}
.footer{
position: fixed;
bottom: 0;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/476926.html