CSS3技巧:fit-content水平居中
当我们让一个模块水平居中首先想到的肯定是margin:0 auto;有木有?那么今天给大家介绍一个fit-content属性,不知道有没有同学用过,如果用过那么你可以略过这篇文章,没用过的同学就继续了,我也是第一次看到这个属性,之前不知道这个属性更不用说使用了,原来这个CSS属性是用来水平居中的,fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以让我们轻松的实现水平居中的效果;一起来看下代码吧。
在不设置宽度,并且元素中含用float:left情况下居中,先看一段代码:
<div class="navbar center">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/">关于我们</a></li>
<li><a href="/">产品展示</a></li>
<li><a href="/">客户支持</a></li>
<li><a href="/">联系我们</a></li>
</ul>
</div>
li{float:left}
如此这个导航是不会居中的,当我们通过设置fit-content加上margin来做到居中。
ul{
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
目前这个属性只支持Chrome和Firefox浏览器,下面是居中的代码:
width:-moz-fit-content;
width:-webkit-fit-content;
CSS3技巧:fit-content水平居中的更多相关文章
- CSS/CSS3 如何实现元素水平居中
更新:可直接访问 [CSS/CSS3 如何实现元素水平居中] 查看效果,右键查看源代码 -------------------------------------------------分割线---- ...
- 你需要知道的三个 CSS3技巧(转)
1. 在CSS中用attr()显示HTML属性值 attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行.它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮 ...
- CSS3技巧:利用css3径向渐变做一张优惠券(转)
在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...
- 常用css3技巧
H5移动前端开发常用高能css3汇总 1.禁止a标签点击高亮,这些都是非官方属性,但实用性超强 html,body{ -webkit-touch-callout: none; //禁止或显示系 ...
- CSS3技巧巧妙使用:not(:last-of-type)简化你的css代码
终于找到了一个好方法,使用:not(:last-of-type)简单方便,再也不要麻烦的单独使用:last-of-type了,不错! 应用场景:平时我们的列表一般都会有分割线,但是最后一个列表没有分割 ...
- CSS3实战之content
为元素添加内容 content属性术语内容生成和替换模块,该属性能够为指定元素添加内容. 取值如下 normal:默认值 string:文本内容 attr():插入元素的属性值 uri():插入一个外 ...
- css3新增的content 的用法:
<-----------------------------------------------文字加在内容后面----------------------------------------- ...
- css3技巧——产品列表之鼠标滑过效果(一)
查看效果: http://www.daqianduan.com/example?pid=6117 html代码: <div class="main"> <div ...
- css3技巧属性之text-overflow
text-overflow:clip | ellipsis 默认值:clip 取值: clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉. ellipsis: 当对象内文本 ...
随机推荐
- Bookmarks www
Bookmarks alexis- (Alex Incogito) - Repositories · GitHub GitHub - aetcnc-Arduino_DeltaHMI_RS485 Ope ...
- 蓝屏代码0X0000007B可能是SATA mode问题
Win7蓝屏代码0X0000007B可能是硬盘模式的问题,我进入BIOS把SATA的mode从Enhanced改为Compatible(及IDE兼容模式)结果系统可以顺利启动没有问题. 从 ...
- CSS3新属性解释及用法
一. transition(a标签hover渐隐效果) a:hover{transition: color 0.15s linear 0s, background-color 0.3s linear ...
- iframe弹出框js ie6下存在bug
ie6的iframe在第一次加载的显示不出来,显示空白,但是很奇怪,刷新就可以正常显示了,一开始以为这只是IE6下iframe加载的bug,但是最后结果发现这是ie6下javascript延迟加载出现 ...
- Leetcode 之Same Tree(48)
用递归比较简单,这里用迭代的方式实现.注意什么时候返回true,什么时候返回false. bool isSameTree(TreeNode *p, TreeNode *q) { stack<Tr ...
- python_day6学习笔记
一.Logger模块 logging.basicConfig函数 可通过具体参数来更改logging模块默认行为,可用参数有 filename: 用指定的文件名创建FiledHandler(后边会具体 ...
- 小知识-为什么Linux不需要磁盘碎片整理
转载至:http://beikeit.com/post-495.html 简单译文: 这段linux官方资料主要介绍了外部碎片(external fragmentation).内部碎片(inter ...
- ORM数据库查询操作之基于双下划线的跨表查询
创建表结构 from django.db import models class Book(models.Model): title=models.CharField(max_length=32) ...
- Message Queue中的推与拉(转)
Message Queue的设计和实现(7)http://mp.weixin.qq.com/s/zQdDBAHu1UgJJzxH2eCHgQ 数据发送中的推与拉. 当MQ要把数据给消费者的时候,就涉及 ...
- IIS 安装问题
今天去客户现场的内网环境安装IIS,结果第一步尴尬,是虚拟机搭出来,安装时没有源文件,然后让那边运维给系统盘挂上了,第一步通过了,可以安装了,但是由于之前也没吝啬,啥都点了,这次就合计不用那么多,结果 ...