我一直在困惑的东西,应该是很容易的,但在一个无果的三个小时后,我还没有解决它:
一个朋友要求我修复his WordPress website的模板,使水平导航菜单栏在页面上水平居中。他希望它贴合在红色部分的底部中间 – 然后它只会适合在红色页面两侧的两个标志之间。
红色部分(class =“header”)将text-align设置为center。这似乎是足够好,以确保标题和其下的描述文本是中心对齐,但由于某种原因,我不能使菜单(这是一个ul)对齐到页面的中心。
有人会关心建议我做错了什么?为什么我不能得到菜单居中?它是什么,我需要改变在样式表,以使它工作?
解决方法
要使一行块居中,您应该使用inline-block:
ul.menu { display: block; text-align:center; } ul.menu li { display: inline-block; }
IE不理解inline-block,但是如果你将它设置为inline只是为了IE,它仍然会表现为一个inline-block:
<!--[if lt IE 8]> ul.menu li { display: inline } <![endif]-->