在导航的布局中,导航条会用横向布局的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. [FBA]SharePoint 2013自定义Providers在基于表单的身份验证(Forms-Based-Authentication)中的应用

    //http://tech.ddvip.com/2014-05/1401197453210723.html 由于项目的需要,登录SharePoint Application的用户将从一个统一平台中获取 ...

  2. Linux CPU 核数检查脚本

    #!/bin/bash physicalNumber=0 coreNumber=0 logicalNumber=0 HTNumber=0 logicalNumber=$(grep "proc ...

  3. 2015 Multi-University Training Contest 6

    1001 Average 忍不住又补了一题. 只要枚举1与2之间1给2,2给1,什么都不做三种状态. 后面的情况都已经决定了. (估计只有我比赛的时候把a candy当成a个糖果了吧QAQ) # in ...

  4. sync命令

    sync命令用于强制被改变的内容立刻写入磁盘,更新超块信息. 在Linux/Unix系统中,在文件或数据处理过程中一般先放到内存缓冲区中,等到适当的时候再写入磁盘,以提高系统的运行效率.sync命令则 ...

  5. MediaWiki搭建教程

    ♦  MediaWiki是什么以及有什么作用,这里我就不再阐述了,网上可以查到很多.这里只是简单记录一下搭建wiki的基本过程,给一些热爱捯饬的小伙伴一些参考. ♦  其实wiki的搭建本身很简单,最 ...

  6. C++内存申请容易产生的错误

    1.起因 前两天用python写了一款工具用来把excel文件转换成json文件,今天给他们用的时候发现在文本下看正常,但是在程序中使用就是会多出一些莫名其妙的字符. 2. 调查 原来主要是我写的工具 ...

  7. HDU3371--Connect the Cities(最小生成树)

    Problem Description In 2100, since the sea level rise, most of the cities disappear. Though some sur ...

  8. Android 内存监测工具 DDMS --> Heap(转)

    DDMS 的全称是Dalvik Debug Monitor Service,它为我们提供例如:为测试设备截屏,针对特定的进程查看正在运行的线程以及堆信息.Logcat.广播状态信息.模拟电话呼叫.接收 ...

  9. python 自动认证登录

    import urllib import base64 import urllib2 def auto_login(urllink,username,password): authstr = 'Bas ...

  10. JedisConnectionException: Unexpected end of stream.

    在实际项目中遇到redis读取时报错. 报错是 [ERROR]  redis.clients.jedis.exceptions.JedisConnectionException: Unexpected ...