html ul在div里居中,在DIV内水平居中UL

我的div里面有ul，我希望将ul水平放在屏幕的中心位置。

可以在此处找到项目的完整代码：jsfiddle

我尝试过使用：

margin: 0 auto; /* After setting the width of course */

text-align: center; /* Ran out of ideas!! */

我也尝试过相对定位和设置％而不是px，但这并没有给我准确的屏幕中心，而且，如果我在菜单中添加了更多项目，那么在包含它们之后它就不会是中心(使用一个％)。

我的完整代码位于jsfiddle，供您修改。

为方便起见，我贴了一些(我认为的)相关代码：

CSS：

/* Main*/

ul#nav {

display: inline-block;

padding: 0px;

list-style-type: none;

white-space: nowrap;

position: relative;

top: 10px;

left: 10%; /* This is what im currently using, but as thought, it doesnt work as needed :(*/

border: 2px solid chocolate;

-moz-border-radius: 10px; /* Border Radius for Mozilla Firefox */

border-radius: 10px; /* Border Radius for everything else*/

}

html ul在div里居中,在DIV内水平居中UL相关推荐

让图片在div里居中（三种方法）
问题当我们将一张 img 放在一个 div 里的时候,具有超高审美的我们,硬是要将 img 居中于 div.所以,产什么以下解决方法. 解决方法布局文件代码 <div class=&quo ...
HTML学习笔记：让div在屏幕居中，图片在div里居中
目录一.效果演示二.实现方法方法一:利用CSS实现方法二:利用JavaScript实现方法三:利用JavaScript实现方法四:利用jQuery实现一.效果演示二.实现方法方法一: ...
html div自动居中显示,div居中与div内容居中
div css结构时,常见到div 居中与div形式居中,即div本身水准居中与div内的形式居中机关. 而形式居中又分为垂直居中与水准居中,这里CSS5将逐个让人人驾御这几个居中机关手段. 关于di ...
html div自动居中显示,DIV居中_div水平居中_DIV布局居中
若何让DIV居中呢?若何让DIV盒子水准居中呢?本节CSS5让大家实现DIV结构程度居中. 一.div居中完成引见在结构一张网页时,一般网页主体框架是居中于浏览器中的.实现最外层DIV水准居中与涉猎 ...
html中div屏幕居中,实现DIV屏幕居中
第一种方法: CSS代码 : .dv1{ height:200px; width: 200px; border:1px solid red; position: absolute; top: 0px; ...
用CSS让DIV上下左右居中的方法
例如一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念利用表格单元格的居中属性. 步骤 ...
div内上下左右距离_用CSS让DIV上下左右居中的方法
当父div的行高等于自身高度时,内部的行内元素会上下居中显示.行内块没有固定高度时也会上下居中显示.所以需要对父div的 line-height 进行调整.利用定位属性(top.left.right. ...
Css标题中图片居中,图片居中：任意图片在div里的上下垂直都居中！
任意一个图片,在div中都居中显示,这是比较常用的CSS,很多刚学习的新手却并不知道! div{ border:1px solid #ccc; height:500px; width:500px; l ...
html5图片列表纵向,div css图片列表实例布局案例ul li布局
DIV CSS布局图文列表布局案例 ul li图文列表使用div css ul li布局图文列表小局部案例,学习图文列表布局实际案例. div+css图文布局案例图本案例在DIVCSS5模板基础上 ...

html ul在div里居中,在DIV内水平居中UL

html ul在div里居中,在DIV内水平居中UL相关推荐

最新文章

热门文章