HTML元素居中顯示的方法
阿新 • • 發佈：2019-01-06
1、固定寬度width屬性，將margin-left和margin-right設定為auto
div{
width:300px;
margin-left:auto;
marign-right:auto;
}優點：簡單易懂，相容性強
缺點：擴充套件性差，對未知寬度屬性的元件無法設定
2、將position屬性設定為relative，父子塊元素float都為同一方向，之後讓父子塊元素向相反方向各位移50%，即可達到居中目的
優點：相容性強，擴充套件性強<!DOCTYPE html> <html> <head> <meta charset="utf-8" ></meta> <title></title> </head> <style type="text/css"> .menu{ width: 95px; height: 30px; background: #FF0000; color: #FFF; float: left; text-align: center; margin-right: 10px; padding-top: 12px; border-spacing: 10px; right: 50%; position: relative; } #form{ width: auto; height: 100px; border-color: #FF0000; border-width: thin; border-style: solid; left: 50%; position: relative; float: left; } </style> <body> <div id="form"> <div class="menu">首頁</div> <div class="menu">詳情</div> <div class="menu">管理</div> <div class="menu">投訴</div> <div class="menu">反饋</div> <div class="menu">留言</div> <div class="menu">舉報</div> <div class="menu">拉黑</div> <div class="menu">點贊</div> </div> </body> </html>
缺點：操作略複雜