让横向ul在页面中水平居中的方法

在导航的布局中,导航条会用横向布局的ul li.如果要让其居中,怎么办呢?

第一种方法:

ul{text-align:center;}

li{display:inline}

这种方法不适合ie低版本。因为这种方法会让ie默认让所有元素居中。

第二种方法:

  用一个div把ul包起来,<div id="wrap"></div>

  #wrap{float:left;position:relative;left:50%;}
       

    ul{position:relative;left:-50%;}

  这种方法首先把父级元素浮动起来,让子元素的内容撑开宽度,这样父元素和子元素的宽度就是一致的

  然后让父元素的最左边与body(假设body就是最外边的元素)的中线对齐,同时相当于ul的左边也与body的中线对齐了
  

  然后再把ul的左侧向左移动50%(wrap的宽度与ul的一致),即可居中

时间: 2024-12-28 21:34:31

让横向ul在页面中水平居中的方法的相关文章

Javscript调用iframe框架页面中函数的方法

Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].hw_CallIn(callerid,sessionid); 说明: CallCenter_iframe为iframe的id hw_CallIn为iframe中页面中的方法名 callerid和sessionid为方法中的参数 例子如下:index.html <a href="#" o

用juery的ajax方法调用aspx.cs页面中的webmethod方法示例

juery的ajax调用aspx.cs页面中的webmethod方法:首先在 aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性,具体实现如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助 首先在 aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性. 如: [WebMethod] public static string GetUserName() { //...... } 如果要在这个方法里操作session,那还得将WebMethod的Enable

利用css来让一个div在页面中垂直居中的方法

一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半. width:300px; height:200px; position:absolute; left:50% top:50%; margin:-100px 0 0 -150px ; 2.使用jquery代码  $(window).resize(function(){ $

CSS中水平居中的方法

居中是我们在css中经常遇到的问题,一般有水平居中.垂直居中.垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记. css水平居中 text-align:center 为了看得更清楚,我们举一个例子,如图,我们将div2放入div1中,现在,如果我们想让文字在div2中水平居中,那么将它的父元素div2或者(div1)设置为text-align:center即可.因为text-align具有继承性,而且text-align它只对行内元素有效. 那么接下来,如果我们想让d

JavaScript在页面中的引用方法

现在前端开发越来越流行,框架也越来越多,像ExtJs.JQuery.Bootstrap等.虽然入行这么多年,但是感觉自己在前端方面还是存在基础不牢的地方,特别是CSS和JS.因此最近打算重新阅读这方面的经典书籍,来夯实自己的基础.因此打算边读书,边写博客,将我自己的感觉有用的地方记下来,以加深印象. 在前端开发,人人都会遇到JavaScript,也必须了解它.在用到它之前,首先必须了解怎么样将其引用到自己的页面中去.以前因为是快速开发,很少去关注这点,对JavaScript的引入,一掠而过,没有

图片在页面中处理的方法

var w=$(".img li i").width(); //获取图片承载容器的宽度$(".img li i").height(w*0.618); //设置图片承载容器的高度 $(window).resize(function(){ //浏览器窗口大小改变时重新获取图片承载容器的宽度.设置其高度 var w=$(".img li i").width(); $(".img li i").height(w*0.618);});

在action中将字符串、对象、list集合保存到值栈中,在jsp页面中获取的方法

转自:csdn 封装对象User,属性有id,username,email等1.1:在action中将字符串保存到值栈中   1.1.1 获取值栈对象         ValueStack stack = ActionContext.getContext().getValueStack();   1.1.2 将字符串保存到值栈中         stack.set("username","leo");1.2:在jsp页面中获取值栈中的字符串   1.2.1 <

FCKEditor在jsp页面中的配置方法

大家在使用博客园或者是在网站上面发表一些东西的时候,往往会发现,输入文字的不是一个简单的文本框,而是一个类似于word的在线编辑环境.这个插件叫FCKEditor,使用这个插件要进行一定程度的配置,下面我把配置方法给大家分享一下. 总共要下载两个文件,第一个文件的下载地址是 https://sourceforge.net/projects/fckeditor/files/FCKeditor/2.6.8/打开这个页面后大家会看到 这时页面中有两个可下载项,大家点击第二个可下载项FCKeditor_

如何将servlet中的变量在jsp页面中显示--普通方法

//一.在servlet中的步骤 //1.获取参数,在地址栏输入 String username = request.getParameter("username"); String password = request.getParameter("password"); String realname = "张三"; String gender = "男"; int age = 22; //2.判读,进行跳转 if (&qu