在导航的布局中,导航条会用横向布局的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在页面中水平居中的方法的更多相关文章
-
【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数
[问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...
-
jQuery 互相调用iframe页面中js的方法
1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...
-
javascript 获取父页面中元素对象方法
父页面中: <input type="hidden" id="areaID" value="test1"> <iframe ...
-
用juery的ajax方法调用aspx.cs页面中的webmethod方法示例
juery的ajax调用aspx.cs页面中的webmethod方法:首先在 aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性,具体实现如下,感兴趣的朋友可以参考下哈,希望对大 ...
-
Javscript调用iframe框架页面中函数的方法
Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].h ...
-
valuestack,stackContext,ActionContext.之间的关系以及action的数据在页面中取得的方法
转自:http://blog.csdn.net/quechao123/article/details/4406148 1.三者之间的关系如下图所示: 2.action的数据在页面中取得的方法 在st ...
-
让rdlc报表在ReportViewer中水平居中的方法
正常情况下,rdlc报表在Reportviewer中是居左显示的,如图: 在Reporviewer的属性中,我没有找到能让rdlc的居中显示的方法.网上其他人用的方法都试了,没能实现,只能自己找方法解 ...
-
利用css来让一个div在页面中垂直居中的方法
一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...
-
CSS中水平居中的方法
居中是我们在css中经常遇到的问题,一般有水平居中.垂直居中.垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记. css水平居中 text-align:center 它的效 ...
随机推荐
-
平衡二叉查找树(AVL)的理解与实现
AVL树的介绍 平衡二叉树,又称AVL(Adelson-Velskii和Landis)树,是带有平衡条件的二叉查找树.这个平衡条件必须要容易保持,而且它必须保证树的深度是 O(log N).一棵AVL ...
-
Power Gating的设计(架构)
switching network的层次: 一般选择flatted的形式,hierarchy的结构对voltage drop和performance delay有影响. Power network的结 ...
-
[POJ] 2785 4 Values whose Sum is 0(双向搜索)
题目地址:http://poj.org/problem?id=2785 #include<cstdio> #include<iostream> #include<stri ...
-
Windows XP环境下 搭建Android NDK环境
搭建Android NDK环境 Windows XP环境下 1 一些下载 ① NDK r7:http://developer.android.com/sdk/ndk/index.html ② cygw ...
-
xamarin android alertdialog详解
说明一下:学习xamarin android一段时间,准备写一些xamarin android相关的例子,alertdialog也是使用的非常多得空间之一,非常感谢鸟巢上的小猪,我也是看着他写的教程学 ...
-
swiper轮播在ie浏览器上遇到的显示问题探索
前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...
-
MySQL学习(三) SQL基础查询
其实在数据库最经常用的当属查询操作 基本语法 SELECT [ALL | DISTINCT | DISTINCTROW ] 字段列表 AS 字段别名 [FROM 表名 WHERE 条件表示式 GROU ...
-
学习windows编程 day3 之 自定义画笔的两种方法
LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) { HDC hdc; PAINTSTRU ...
-
RTP格式解析
一般为12字节,16字节头(转自https://www.cnblogs.com/qingquan/archive/2011/07/28/2120440.html) 概述: 实时传送协议(Real-ti ...
-
centos 64位系统安装
由于centos 64位镜像大于4G,所以U盘装不进去.iso镜像,选择网络安装的方法或者使用一个U盘制作启动盘和一个硬盘来装镜像的方法. 1 网络安装第一步 下载 CentOS 安装 ISO 浏览 ...