生活随笔
收集整理的這篇文章主要介紹了
让div居中对齐
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
讓div居中對齊
來源：本站原創 點擊：
使用margin-left:auto;margin-right:auto; 可以讓你的div居中對齊。
.style{margin-left:auto;margin-right:auto;}
縮寫形式為：
.style{margin:0 auto;}
數字0 表示上下邊距是0。可以按照需要設置成不同的值。
查看下面的例子：
運行代碼無著色模式復制打印?
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??<html?xmlns="http://www.w3.org/1999/xhtml"?lang="zh-cn">??<head>??<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"?/>??<title>居中div演示效果</title>??<style?type="text/css">??.align-center{ ??????margin:0?auto;??????/*?居中?這個是必須的，，其它的屬性非必須?*/ ??????width:500px;????????/*?給個寬度?頂到瀏覽器的兩邊就看不出居中效果了?*/ ??????background:red;?????/*?背景色?*/ ??????text-align:center;??/*?文字等內容居中?*/ ??} ??</style>??</head>????<body>??<div?class="align-center">居中div演示效果</div>??</body>??</html>?? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>居中div演示效果</title>
<style type="text/css">
.align-center{margin:0 auto; /* 居中 這個是必須的，，其它的屬性非必須 */width:500px; /* 給個寬度 頂到瀏覽器的兩邊就看不出居中效果了 */background:red; /* 背景色 */text-align:center; /* 文字等內容居中 */
}
</style>
</head><body>
<div class="align-center">居中div演示效果</div>
</body>
</html>
注意，需要加上上面的那句
才能生效，要是不想要這句的話，也可以給body加一個屬性：
body{text-align:center;}
另外，讓div內的內容（包括文字及圖片）居中的代碼是： text-align:center;
總結
以上是生活随笔為你收集整理的让div居中对齐的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
