将此添加到您的样式中

position:relative;
float: left;
left: calc(50% - *half your container length here);

*如果你的容器宽度是50px，放25px，如果是10em，放5em。

只是添加

left:15%; 

到我的CSS菜单

#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}

也有定心技巧吗

你也可以通过改变。pagination来做到这一点，将“text-align: center”替换为两到三行css左边，变换和位置(取决于情况)。

.pagination { left: 50%; /* left-align your element to center */ transform: translateX(-50%); /* offset left by half the width of your element */ position: absolute; /* use or dont' use depending on element parent */ } .pagination a { display: block; width: 30px; height: 30px; float: left; margin-left: 3px; background: url(/images/structure/pagination-button.png); } .pagination a.last { width: 90px; background: url(/images/structure/pagination-button-last.png); } .pagination a.first { width: 60px; background: url(/images/structure/pagination-button-first.png); } <div class='pagination'> <a class='first' href='#'>First</a> <a href='#'>1</a> <a href='#'>2</a> <a href='#'>3</a> <a class='last' href='#'>Last</a> </div> <!-- end: .pagination -->

因为多年来我一直在用我在一些博客里学到的老把戏，很抱歉我不记得他的名字了。

无论如何，将浮动元素居中，这应该是可行的:

你需要一个这样的结构:

.main-container { 浮:左; 位置:相对; 左:50%; ｝ .fixer-container { 浮:左; 位置:相对; 左:-50%; ｝ < div class = "集装箱" > < div class = " fixer-container”> < ul类= " list-of-floating-elements " > <li class=" floats ">浮动元素</li> . > <li class=" floats ">浮动元素</li> . > <li class=" floats ">浮动元素</li> . > < / ul > < / div > < / div >

诀窍是给浮动左，使容器改变宽度取决于内容。比是一个位置问题:相对和左50%和-50%的两个容器。

好在这是跨浏览器的，应该可以在IE7+上工作。

IE7不知道内联块。 你必须补充:

display:inline;
zoom: 1;

将此添加到您的样式中

position:relative;
float: left;
left: calc(50% - *half your container length here);

*如果你的容器宽度是50px，放25px，如果是10em，放5em。