做分页时经常需要将不定宽元素居中
方法1：将外层元素设: text-align: center，将不定宽元素舍：display: inline
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } div { height: 100px; margin: 20px; border: 1px red solid; } .wrap { text-align: center; } .wrap ul{ list-style:none; display:inline; } .wrap li{ margin-right:8px; display:inline; } </style> </head> <body> <div class="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html>
原理是利用内块级元素的text-align:center时，它下面的的内联元素会水平居中。
方法二：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; list-style:none; } div { height: 100px; border: 1px red solid; } .wrap { position: relative; float: left; left: 50%; } .wrap ul{ position: relative; left: -50%; /*相对于父元素的宽度*/ } .wrap li{ float: left; margin-right:8px; display: inline; } </style> </head> <body> <div class="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html>