位置宽度的ul居中

方案一、利用浮动的包裹性和相对定位百分比数据值特性,传说称之为“相对浮动”

.unknow_width_center1 {position:relative; left:50%; float:left;}.unknow_width_center1 li {position:relative; right:50%; z-index:2; float:left}<ul class="unknow_width_center1">    <li><a href="#">1</a></li>    <li><a href="#">2</a></li>    <li><a href="#">3</a></li>    <li><a href="#">4</a></li>    <li><a href="#">5</a></li>    <li><a href="#">6</a></li></ul>

通过给父元素设置浮动float,再设置父元素的position属性为relative和left:50%;子元素设置position:relative和left:-50%来实现水平居中。

可以保留块级元素仍然是以display:block的形式显示,不会添加无意义的标签,不添加嵌套深度。缺点是设置了position:relative;带来了一些副作用,并且需要闭合(清除)浮动。

方案二、利用text-align属性特性(text-align:center 对于ie6、7块级和内联级都可以水平居中。其它浏览器内联级(内联块级,文字)元素才可以水平居中,块级无效。 )强制定义为内联 display:inline

.unknow_width_center2 {text-align:center; padding:5px;} .unknow_width_center2 li {display:inline;}<ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ul>

将子元素设置为内联居中,那么大家都知道的display:inline内联元素宽高是不可以设定的,局限性太大,不宜使用。

方案三、利用table的属性特性

.unknow_width_center3{margin:0 auto} .unknow_width_center3 ul {overflow:hidden; *zoom:1} .unknow_width_center3 ul li {float:left;}<table class="unknow_width_center3"><tr> <td><ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li><li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ul></td> </tr> </table>

是使用table作为容器的方法来实现。添加了无意义的标签。Table标签本身并不是块级元素,当我们不设置table的宽度的话,他里面的宽度 是由他内部元素的宽度撑起来的。但即使我们没有设置table的宽度,直接设置table的外边距margin:0 auto;就可以实现水平居中了!这样我们就可以通过设置table水平居中,间接使里面的内容居中。

方案四、利用内联块display:inline-block的text-align属性

.unknow_width_center4 {text-align:center} .unknow_width_center4 ul li {display:inline-block;*display:inline; *zoom:1;} <ul class="unknow_width_center4 "><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul>

IE6/7下直接设置display:inline-block的居中无效,这里在IE6/7下设置了display:inline,神奇的是竟然 可以设置宽高及其垂直方向的内外边距。缺点是display:inline-block会引起一些间隙,当然有看起来碍眼解决方案。

时间: 2024-11-09 00:43:24

位置宽度的ul居中的相关文章

css如何让自适应宽度的块居中显示

<div class='footer'> <ul> <li>网站首页</li> <li>企业招聘</li> <li>联系我们</li> <li>讲师招聘</li> </ul> </div> .footer{ width: 100%; height: 100px; background: black; position: fixed; bottom: 0; text

div 加滚动条 超过div宽度 自动换行 div居中

一.div 中加滚动条 一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢,否则不成的 不过在不超出时,会有下面的滚动条,所以不是最好的选择 二. <div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div> 记住宽和高一定要设置噢

利用高德地图完成用户地图选址,包括搜索位置和标签固定居中

这两天一直捣鼓着地图的选址功能,需要达到的要求是:1,能用户定位  2,大头针固定在地图中心,拖动地图停止后获取到该大头针的位置信息    3,能通过搜索框搜索到我们输入的地址 主要思路:大头针分为两个   一个是用户的位置大头针  另一个是所选取的位置的大头针(包括拖动后的大头针和搜索功能查找到位置的大头针,公用一个大头针  )并且两个大头针都成为控制器器属性. 我使用到的高德地图sdk是: 'AMap3DMap' , '5.2.1' #高德3D地图 'AMapSearch' , '5.2.1

让任意宽度的图片居中 占满屏幕整个水平宽度

先在html head 里写上<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 再设置图片宽度,如:<img style="width:100%;" src="Img/line.png" />

Java Swing设置主窗体位置居中方法

01.第一种方法 int windowWidth = frame.getWidth(); //获得窗体宽 int windowHeight = frame.getHeight(); //获得窗体高 Toolkit kit = Toolkit.getDefaultToolkit(); //定义工具包 Dimension screenSize = kit.getScreenSize(); //获取屏幕的尺寸 int screenWidth = screenSize.width; //获取屏幕的宽 i

Java Swing设置主窗口位置居中方法

01.第一种方法 int windowWidth = frame.getWidth(); //获得窗口宽 int windowHeight = frame.getHeight(); //获得窗口高 Toolkit kit = Toolkit.getDefaultToolkit(); //定义工具包 Dimension screenSize = kit.getScreenSize(); //获取屏幕的尺寸 int screenWidth = screenSize.width; //获取屏幕的宽 i

图片宽度溢出父元素,居中

图片宽度不固定  居中   (超出父元素宽度) 父元素  taxe-align:center: .img{ margin:0 -100%; } 原文地址:https://www.cnblogs.com/zzzzzwt/p/8119368.html

javascript自适应宽度的瀑布流实现思路

这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和json是滚动加载更多内容的时候用到的,感兴趣的你可以参考下哦 这样的布局并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮,国内有众多网站采用瀑布流的布局方式,例如花瓣网.美丽说等等.而事实上在中国互联网,模仿一些在国外被人看好的模式(当然,你也可以说是山寨或抄

CSS布局奇淫技巧之--各种居中

居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明外,都是兼容IE6+.谷歌.火狐等主流浏览器的. 先来说几种简单的.人畜无害的居中方法 1. 把margin设为auto 具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效. 2.使用 text-ali