HTML元素居中显示的方法

来源：互联网发布：ip反查域名编辑：程序博客网时间：2024/06/05 02:46

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>

优点：兼容性强，扩展性强

缺点：操作略复杂

0 0