【居中】不定宽的水平居中 / 浮动元素的水平居中
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> *{margin:0;padding:0;} .wrap{clear:both;} .box{background:#ff0;} body { width: 100%; overflow: hidden; } .wrap { position: relative; left: 50%; float: left; } .box { position: relative; right: 50%; float: left; } .box1 { width: 300px; } .box2 { width: 600px; } </style> <div class="wrap"> <div class="box box1">box1</div> </div> <div class="wrap"> <div class="box box2">box2</div> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> *{margin:0;padding:0;} ul{list-style:none;} .box{background:#ff0;} .wrap { text-align: center; } .box { display: inline-block; *display: inline; *zoom: 1; text-align: left; } .box li { float: left; } </style> <div class="wrap"> <ul class="box"> <li>box</li> <li>box</li> <li>box</li> </ul> </div> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步