div水平垂直居中的完美解決方案

2024-07-11 08:40:07

字體：大中小

來源：轉載

供稿：網友

讓div居中對齊
使用margin-left:auto;margin-right:auto; 可以讓你的div居中對齊。
.style{margin-left:auto;margin-right:auto;}
縮寫形式為：
.style{margin:0 auto;}
數字0 表示上下邊距是0。可以按照需要設置成不同的值。

查看下面的例子：

<br /><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br /><html xmlns=”http://www.w3.org/1999/xhtml” lang=”zh-cn”><br /><head><br /><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><br /><title>居中div演示效果</title><br /><style type=”text/css”><br />.align-center{<br />margin:0 auto; /* 居中這個是必須的，，其它的屬性非必須 */<br />width:500px; /* 給個寬度頂到瀏覽器的兩邊就看不出居中效果了 */<br />background:red; /* 背景色 */<br />text-align:center; /* 文字等內容居中 */<br />}<br /></style><br /></head><br /><body><br /><div class=”align-center”>居中div演示效果</div><br /></body><br /></html><br />
提示：您可以先修改部分代碼再運行
注意，需要加上上面的那句

才能生效，要是不想要這句的話，也可以給body加一個屬性：
body{text-align:center;}

另外，讓div內的內容（包括文字及圖片）居中的代碼是： text-align:center;

div居中的完美解決方案！ （水平垂直居中）
1,關于居中使用css為：position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
對于ie6,只能把position:改成absolute;

<br /><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br /><html xmlns=”http://www.w3.org/1999/xhtml” lang=”zh-cn”><br /><head><br /><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><br /><title>水平垂直居中div演示效果</title><br /><style type=”text/css”><br />.align-center{<br />position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;<br />}<br /></style><br /></head><br /><body><br /><div class=”align-center”>水平垂直居中div演示效果</div><br /></body><br /></html><br />
提示：您可以先修改部分代碼再運行

上一篇：CSS:用overflow代替left截取指定長度字符串

下一篇：HTML設置超鏈接字體顏色和點擊后的字體顏色