使身體與中心對齊-使身體對中
[英]align body to center - centering body
問題描述
嗨，我在絕對定位方面遇到問題，我想要max / min-width / height和居中具有背景的頁面； 這是我的css代碼，但確實沒有進行居中工作...我需要將主體對齊以使此條件居中
CSS代碼：
body
{
position:absolute;
font-family: "b nazanin","b roya", times new roman;
font-size:16px;
min-width:948px;
min-height:550px;
width:1280px;
height:700px;
}
html
{
background: fixed -webkit-linear-gradient(red, blue); /* For Safari */
background: fixed -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: fixed -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: fixed -webkit-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: fixed linear-gradient(red, blue);
}
3 個解決方案
解決方案1
0 2013-11-30 17:21:26
min-width，min-height僅在寬度和高度為動態時使用。
檢查是否沒有http://jsfiddle.net/Ur6ZR/8/
body {
font-family:"b nazanin", "b roya", times new roman;
font-size:16px;
outline:10px solid white;
margin:0 auto;
min-width:948px;
min-height:550px;
width:100%;
height:100%;
}
html {
background: fixed -webkit-linear-gradient(red, blue);
background: fixed -o-linear-gradient(red, blue);
background: fixed -moz-linear-gradient(red, blue);
background: fixed -webkit-linear-gradient(red, blue);
background: fixed linear-gradient(red, blue);
}
看看是否可以幫助您。
解決方案2
0 2013-11-30 19:25:01
為了使身體居中，您只需要這樣做：
body{
margin:0 auto;
width:1000px;
}
該代碼可以在所有瀏覽器（Firefox，Chrome，IE [7-11]，Opera（也是Presto））上正常運行。 您不需要（為此目的）。
此代碼是一個示例。 因此，也許您需要進行一些（小）調整。
您不應該使用position:absolute 。 這是一個壞方法。 如Mörre所說，這對我也沒有意義。 我也建議您重新評估您的方法。 position:absolute有時可能有用，但在這種情況下完全沒有用。
解決方案3
0 2013-12-01 05:12:25
您最好使用<div>代替。 通常不建議格式化<html>標記。
CSS：
body {
background: fixed -webkit-linear-gradient(red, blue); /* For Safari */
background: fixed -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: fixed -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: fixed -webkit-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: fixed linear-gradient(red, blue);
border: 0; /* removes the default body border */
font-family: 'b nazanin', 'b roya', Times New Roman;
font-size: 18px;
}
div /* replace with the elements class */ {
height: 700px;
margin: auto; /* will cause the element to be center aligned */
/* min-height and min-width are useless with a fixed height and width */
width: 1280px;
}
而且，如果您希望頁面的內容居中，請嘗試以下操作：
body {
border: 0;
}
.wrapper {
margin: auto;
width: 960px; /* 960px is probably the max width you would want to use */
}
HTML將如下所示：
<body>
<div class="wrapper">
<!-- content -->
</div>
</body>
HTML Body作為中心對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.