不确定宽度元素居中-CSDN博客

方法一

<div class="wrap">
		<table>
			<tbody>
				<tr>
					<td>
						<ul>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							
						</ul>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

.wrap{width: 1000px;height: 300px;margin: 0 auto;}
table{margin: 0 auto;}
li{float: left;margin-right: 5px;}
table可以在不确定宽度的情况下用margin:0 auto;但用了一些无意义的标签。

方法二

	<div class="wrap">
		<ul>
			<li><a href="">1</a></li>
		</ul>
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
		</ul>
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
		</ul>
	</div>
.wrap{width: 500px;height: 300px;}
ul{text-align: center;}
li{display: inline;}

主要问题就是li设置成了inline.不能设置宽高

方法三

	<div class="wrap">
		<ul>
			<li><a href="">1</a></li>
		</ul>
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
		</ul>
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
		</ul>
	</div>
.wrap{width: 500px;height: 300px;}
ul{position: relative;left: 50%;clear: both;float: left;}
li{position: relative;left: -50%;display: inline;}
有点麻烦额。。

转载于:https://www.cnblogs.com/wz0107/p/5054031.html