SS导航菜单水平居中的多种方法
在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决。而今天主要讲解如何让未知宽度的元素居中,下面我们会列出几种方法来解决水平居中问题。当然这些方法不一定是用来解决导航菜单问题,还有其它类似情况也是可以使用的。
在线演示:Demo
CSS导航菜单水平居中的多种方法:
- 方法1:display:inline-block
- 方法2:position:relative
- 方法3:display:table
- 方法4:display:inline-flex
- 方法5:width:fit-content / width:intrinsic
方法1:display:inline-block
这个方法比较简单,是将容器转成「display:inline-block」行内块级元素,然后就可以直接用「text-align:center」使其达到水平居中效果。
HTML代码:
这里我们需要一个div来包围这个导航菜单。
<div class="navbar"><ul><li><a href="/">首页</a></li>…</ul> </div>
CSS代码:
给外面的div添加「text-align:center」,然后将菜单容器设成「display:inline-block」行内块级元素,菜单浮左「float:left」
.navbar {text-align:center; } .navbar ul {display:inline-block; } .navbar li {float:left; } .navbar li + li {margin-left:20px; }
这里浏览器兼容只能是IE8或更高版本,所以如果要兼容IE7的话,请加入以下代码
.navbar ul {display:inline;zoom:1; }
方法2:position:relative
这是使用「position:relative」定位方法来让元素水平居中,我不是很推荐这方法,因为代码多了个div去包住,当然这些是根据情况来使用的。
HTML代码:
<div class="navbar"><div><ul><li><a href="/">首页</a></li>…</ul></div> </div>
CSS代码:
将定位div设为浮动,再定位「left:50%」,然后导航定位至「left:-50%」,这方法很有意思吧。可能表达不是很清楚,自己看代码吧^^
.navbar {overflow:hidden; } .navbar > div {position:relative;left:50%;float:left; } .navbar ul {position:relative;left:-50%;float:left; } .navbar li {float:left; } .navbar li + li {margin-left:20px; }
如果要兼容IE7,请添加以下样式:
.navbar {position:relative; }
方法3:display:table
如果你喜欢简洁的代码,哪么这个方法就非常适合你了。
HTML代码:
<ul class="navbar"><li><a href="/">Home</a></li>… </ul>
CSS代码:
.navbar {display:table;margin:0 auto; } .navbar li {display:table-cell; } .navbar li + li {padding-left:20px; }
浏览器兼容:这方法代码精简,但不支持IE7及以下版本……
方法4:display:inline-flex
有关flex layout的知识自己查下吧>_<
HTML代码:
<div class="navbar"><ul><li><a href="/">Home</a></li>…</ul> </div>
CSS代码:
.navbar {text-align:center; } .navbar > ul {display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex; } .navbar li + li {margin-left:20px; }
浏览器兼容:不支持IE7及以下版本的IE浏览器。
方法5:width:fit-content
HTML代码:
<div class="navbar"><ul><li><a href="/">首页</a></li>…</ul> </div>
CSS代码:
.navbar {text-align:center; } .navbar > ul {display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex; } .navbar li + li {margin-left:20px; }
浏览器兼容:这个兼容比较低,只支持Firefox或chrome、Opera 12这些较新的浏览器。
转:http://www.shejidaren.com/css-center-elements-horizontally.html转载于:https://www.cnblogs.com/hnn-py/p/10213398.html
SS导航菜单水平居中的多种方法相关推荐
- 7种优秀的导航菜单设计总结
导航是应用程序界面中最常见的模块之一,在链接应用程序中起着每个页面的作用. 不同的设计需求和业务目标决定了导航的设计因品而异,移动设备的尺寸远小于计算机.因此,在设计移动终端导航时,应考虑更全面,以确 ...
- html左侧分级导航,jquery实现无限分级横向导航菜单的方法
本文实例讲述了jquery实现无限分级横向导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 1. jquery插件版本代码如下: (function($){ $.fn.extend({ dro ...
- html让ul的li自动居中,css ul li导航菜单居中问题解决方法
昨晚群里一个朋友帮忙解决的问题,之前没有遇到过,题目如下: 不改变html结构,使导航菜单垂直水平居中,导航宽度自适应屏幕100%,高度30px;单项高度28px,宽80px; 兼容:ie6+,ff, ...
- 怎么在html5中制作下拉导航栏,在PPT中制作下拉式导航菜单效果的方法
为了提高PPT演示文稿的观赏性,用户可能希望在PPT幻灯片中添加下拉式导航菜单效果,通过该导航菜单在不同幻灯片间进行导航(如图1所示),制作下拉式导航菜单的具体操作步骤如下. 图1 下拉式导航菜单 ( ...
- html把图片做成导航条背景,DIV+CSS背景图片导航菜单的实现方法
导航菜单通常的做法是用ul li,但是ul li纯文本方式的导航菜单实现的效果比较简单,我们可以使用背景图片来实现菜单的个性化设置.让我们开始吧: 先看效果图: 仅这一张图片,我们实现一个横行CSS菜 ...
- 二级导航菜单使用方法以及常见问题
二级导航菜单 使用css的diaplay属性设置二级菜单的显示情况. 具体思路如下: 1.先制作静态的一级菜单和二级菜单,最好使用ul和li元素,以及a标签和float属性,还有要把二级菜单的位置定好 ...
- abp.ajax get,ABP框架中导航菜单的使用及JavaScript API获取菜单的方法
每一个WEB应用程序都有导航菜单,Abp也为用户提供了通用的创建和显示菜单方式. 创建菜单一个应用程序可能包含不同的模块,而每个模块都可能有它自己的菜单项.在Abp中,需要创建一个派生自Navigat ...
- WordPress主题开发自定义导航菜单方法
一个网站的导航菜单可能有顶部导航菜单.主导航菜单.底部导航菜单等.所以,在WordPress主题开发时,我们就要考虑到如何自定义这些导航菜单.下面我们看看WordPress主题开发自定义导航菜单方法. ...
- 用HTML里面的表格制作可以下拉的导航栏,excel表格中下拉菜单制作有什么方法
excel下拉菜单的制作也是经常使用的一个操作,通常就是利用数据有效性建立分类下拉列表实现.以下是学习啦小编为您带来的关于excel下拉菜单制作方法介绍,希望对您有所帮助. excel下拉菜单制作方法 ...
- BootstrapBlazor实战 Menu 导航菜单使用(2)
接上篇: B08. BootstrapBlazor实战 Menu 导航菜单使用(1) 实战BootstrapBlazorMenu 导航菜单的使用, 以及整合Freesql orm快速制作菜单项数据库后 ...
最新文章
- mac与windows服务器 访问和共享
- Android获取程序路径 (/data/data/appname)
- 从SQL Server到多数据库,微软数据库迁移全攻略
- [2.7]【CF933A】A Twisty Movement【CF926B】Add Points【CF917A】The Monster【CF919E】Congruence Equation
- 学术科普 | 漫威电影中的智能大脑
- docker-compose批量管理docker容器
- java游戏妖魔兽_妖1.17正式版下载
- SIM800A/C只能发短信不能收短信解决方案
- 无线路由器设置成交换机
- xbox one 手柄在ubuntu下的使用和开发
- 怎么把几个PDF文件合并成一个PDF
- 学java的就业方向_JAVA的就业方向是什么?
- 【修仙境界】等级划分
- foc学习笔记3——电流环
- 关于遥感中影像数据的组织方法BIL/BSQ/BIP
- 《 ROP EDGE : TOWARDS DEEP GRAPH CONVOLU - TIONAL NETWORKS ON NODE CLASSIFICATION》
- bert模型可以做文本主题识别吗_NLP之文本分类:「Tf-Idf、Word2Vec和BERT」三种模型比较...
- 开源神器:微信真人头像卡通化!
- Ghost安装的部署
- 数据分析思维(下—4)
热门文章
- Reg命令查询注册表
- 【电机学】绪论:基本电磁定律,铁磁材料特性
- linux编译gdal geos,GDAL编译支持GEOS
- 微信小程序python选择题_微信小程序头脑风暴2答题辅助
- 使用 Visual Studio 创建 .NET 类库
- C++静态库与动态库的区别
- 为什么你写了一万小时的代码,却没能成为架构师?| 程序员有话说
- matlab差值报错,matlab插值介绍
- php7isapi,WINDOWS 2000下使用ISAPI方式安装PHP
- 利用遗传算法GA和粒子群算法PSO优化算法,将BP神经网络训练集的MSE作为适应度函数