有沒有辦法將項目居中在布局的中間
[英]Is there a way to center the item in the middle of the layout
問題描述
我試圖將一個項目居中在布局的中間，同時，如果可能的話，如果需要的話，可以通過輕微的 css 調整來控制它的位置。 在我的布局頁面中，我無法弄清楚為什么我想要的水平和垂直屏幕中間的項目都位於屏幕左側。 我知道問題出在我的布局中，我似乎無法找出問題所在。 下面是我的布局的基本版本，其中包含我可以嘗試居中的項目。
* { margin: 0; padding: 0; } html, body { width:100%; height:100%; margin:0; } .layoutPage { min-height: 95%; } /*********************************** ************Header***************** ***********************************/ .headerImage { background: blue; padding: 1.75em; margin: 0; padding: 0; background-color: blue; height: 3.5em; /*4em*/ } /*********************************** ***************Body**************** ***********************************/ .bodyContainer { overflow: auto; padding-bottom: 1em; font-family: Verdana; font-size: 12px; /*12px*/ } .appRoundedShadow { display: inline-block; height: auto
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> </head> <body> <div class="layoutPage"> <div class="headerImage"> </div> <br /> <div class="bodyContainer"> <div class="appRoundedShadow"> <div class="container"> <div style="width: 450px; margin: 0 auto; border: 1px solid;"> <div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;"> <span style="font-weight: bold; font-size: 19px; color: #fff">Report</span> </div> <div style="margin: 1em"> <span style=""><input type="text" name="year"><br></span> <input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/> </div> <div style="margin-left: 1em"> <p>It may take 2 or more minutes to complete your request.<br/></p> </div> </div> </div> </div> </div> </div> <div class="footer"> <hr /> <span class="footerText">Copyright © </span> </div> </body> </html>
我想將整個 appRoundedShadow div 居中
4 個解決方案
解決方案1
0 2019-03-08 21:05:24
要居中您的報告添加此樣式...
.bodyContainer {
text-align: center;
}
解決方案2
0 2019-03-08 21:13:46
你可以給你想要居中的元素 'display:block' 和 'margin:auto'
* { margin: 0; padding: 0; } html, body { width:100%; height:100%; margin:0; } .layoutPage { min-height: 95%; } /*********************************** ************Header***************** ***********************************/ .headerImage { background: blue; padding: 1.75em; margin: 0; padding: 0; background-color: blue; height: 3.5em; /*4em*/ } /*********************************** ***************Body**************** ***********************************/ .bodyContainer { overflow: auto; padding-bottom: 1em; font-family: Verdana; font-size: 12px; /*12px*/ } .appRoundedShadow { display: block; height: auto; margin:auto; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> </head> <body> <div class="layoutPage"> <div class="headerImage"> </div> <br /> <div class="bodyContainer"> <div class="appRoundedShadow"> <div class="container"> <div style="width: 450px; margin: 0 auto; border: 1px solid;"> <div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;"> <span style="font-weight: bold; font-size: 19px; color: #fff">Report</span> </div> <div style="margin: 1em"> <span style=""><input type="text" name="year"><br></span> <input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/> </div> <div style="margin-left: 1em"> <p>It may take 2 or more minutes to complete your request.<br/></p> </div> </div> </div> </div> </div> </div> <div class="footer"> <hr /> <span class="footerText">Copyright © </span> </div> </body> </html>
解決方案3
0 2019-03-08 21:15:33
使用display: inline-block off .appRoundedShadow就大功告成了。
解決方案4
0 已采納 2019-03-08 21:44:48
你必須在這里做幾件事。 首先，刪除<br>這是目前低於.headerImage DIV，因為它增加了額外的空間，使.headerImage出現像它不是垂直居中。
然后，為.appRoundedShadow添加以下.appRoundedShadow ：
.appRoundedShadow {
display: block;
height: auto;
margin: auto;
}
然后，使填充各地一致.bodyContainer （取代它的padding-bottom用padding ）。
最后，刪除.layoutPage上的min-height 。 讓 div 的內容決定高度。
* { margin: 0; padding: 0; } html, body { width:100%; height:100%; margin:0; } /*********************************** ************Header***************** ***********************************/ .headerImage { background: blue; padding: 1.75em; margin: 0; padding: 0; background-color: blue; height: 3.5em; /*4em*/ } /*********************************** ***************Body**************** ***********************************/ .bodyContainer { overflow: auto; padding: 1em; font-family: Verdana; font-size: 12px; /*12px*/ position: relative; } .appRoundedShadow { display: block; height: auto; margin: auto; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> </head> <body> <div class="layoutPage"> <div class="headerImage"> </div> <div class="bodyContainer"> <div class="appRoundedShadow"> <div class="container"> <div style="width: 450px; margin: 0 auto; border: 1px solid;"> <div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;"> <span style="font-weight: bold; font-size: 19px; color: #fff">Report</span> </div> <div style="margin: 1em"> <span style=""><input type="text" name="year"><br></span> <input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/> </div> <div style="margin-left: 1em"> <p>It may take 2 or more minutes to complete your request.<br/></p> </div> </div> </div> </div> </div> </div> <div class="footer"> <hr /> <span class="footerText">Copyright © </span> </div> </body> </html>
在中間將游戲SVG水平和垂直居中的最佳方法是什么？
[英]What's the best way to center horizontally and vertically the play SVG in the middle?
將任何內容居中放置的簡單方法 <div> 到頁面的中間
[英]Easy way to center ANYTHING inside of a <div> to the very middle of the page
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.