在导航的布局中,导航条会用横向布局的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的一致),即可居中

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

  1. 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数

    [问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...

  2. jQuery 互相调用iframe页面中js的方法

    1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...

  3. javascript 获取父页面中元素对象方法

    父页面中: <input type="hidden" id="areaID" value="test1"> <iframe ...

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

    juery的ajax调用aspx.cs页面中的webmethod方法:首先在 aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性,具体实现如下,感兴趣的朋友可以参考下哈,希望对大 ...

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

    Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].h ...

  6. valuestack,stackContext,ActionContext.之间的关系以及action的数据在页面中取得的方法

     转自:http://blog.csdn.net/quechao123/article/details/4406148 1.三者之间的关系如下图所示: 2.action的数据在页面中取得的方法 在st ...

  7. 让rdlc报表在ReportViewer中水平居中的方法

    正常情况下,rdlc报表在Reportviewer中是居左显示的,如图: 在Reporviewer的属性中,我没有找到能让rdlc的居中显示的方法.网上其他人用的方法都试了,没能实现,只能自己找方法解 ...

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

    一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...

  9. CSS中水平居中的方法

    居中是我们在css中经常遇到的问题,一般有水平居中.垂直居中.垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记. css水平居中 text-align:center 它的效 ...

随机推荐

  1. Chapter 14_4 使用_ENV

    因为_ENV是一个普通的变量,我们可以像其他变量一样去对它进行赋值和访问. _ENV = nil 上面的赋值操作,将会使得在它之后的代码块不能直接访问全局变量.不过,对控制你的代码所使用的变量有用处. ...

  2. mvc路由参数注解

    routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); //过滤掉禁止访问的路由 routes.MapRoute( name: &quo ...

  3. 引用WCF地址报下载“https://xxx:8004/TerminalHandler.svc?disco”时出错问题

    服务发布了wcf服务后,在客户端引用发现出现以下错误 - 来自“DISCO 文档”的报告是“下载“https://servername:8004/TerminalHandler.svc?disco”时 ...

  4. js添加div

    有这样一段div布局 <div class="clearfix">    <p class="left c">        <s ...

  5. 数组按时间(字符串->Date)排序

    不说了 ,直接上代码.Talk is cheap , show me the code. NSArray *stortedArray = [wkSelf.dataArray sortedArrayUs ...

  6. Linux下tar bz gz等压缩包的压缩和解压

    Linux下用户经常需要备份计算机系统中的数据,为了节省存储空间,常常将备份文件进行压缩,本文是对压缩和解压命令的大致总结 .tar.gz  解压:tar zxvf FileName.tar.gz  ...

  7. leetcode404-----简单的树的遍历

    Find the sum of all left leaves in a given binary tree. Example: 3 / \ 9 20 / \ 15 7 There are two l ...

  8. 《JS权威指南学习总结--3.1数字》

    3.1数字 内容要点: 一.数字直接量:当一个数字直接出现在JS程序中,我们称之为数字直接量. 二.JS中的算术运算 Math.pow(2,53)      // => 900719925474 ...

  9. 在windows命令行窗口下执行:查看所有的端口占用情况

    开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管理器中没有PID这一项,可以在任务管理器中选&qu ...

  10. Apache的最小配置

    以下配置是Apache的最小配置,路径为/usr/local/apache2/conf/include/lww.xhprof.conf <VirtualHost *:> ServerNam ...