当我们做水平居中的时候，会有许多方法，margin:0 auto,或者test-align:center,以及flex布局。当元素的width不固定的时候，我们如何实现水平居中呢，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    ul{

      margin:0 auto;

    }

    li{

      list-style: none;

      float: left;

      margin-right: 10px;

    }

  </style>

</head>

<body>

<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>

</body>

</html>

　　效果如下：

并没有居中，这个时候我们可以用fit-content来实现水平居中了，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    ul{

      width: -moz-fit-content;

      width: fit-content;

      margin:0 auto;

    }

    li{

      list-style: none;

      float: left;

      margin-right: 10px;

    }

  </style>

</head>

<body>

<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>

</body>

</html>

　　此时我们就可以实现水平居中了，但是fit-content这个是css3新增的属性，仅支持谷歌和火狐浏览器

当div没有设置宽度，使用width的fit-content和margin:auto实现元素的水平居中的更多相关文章

  1. HTML学习之给div高度设置百分比不生效的问题

    这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: < ...

  2. DIV+CSS设置及问题总结

    HTML 中有用的字符实体 注释:实体名称对大小写敏感! 显示结果 描述 实体名称 实体编号   空格     < 小于号 < < > 大于号 > > & ...

  3. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  4. firefox ie chrome 设置单元格宽度 td width 有bug,不能正常工作。以下方式可以解决

    1. firefox ie chrome 设置单元格宽度 td width 有bug,不能正常工作. 如果是上面一行 和下面一行是分别属于两个table,但是他们的列需要对齐,也就是说分开画的,然后设 ...

  5. ueditor 设置高度height. ue.setHeight(400); 设置宽度 width

    1.引入的文件: <script type="text/javascript" src="../../dist/ueditor1_4_3-utf8-php/uedi ...

  6. 表格单元格td设置宽度无效的解决办法 .

    http://zzstudy.offcn.com/archives/11366 在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置w ...

  7. span设置宽度有效无效问题

    在html中如何设定span的宽度?这看上去是个很简单的问题,似乎用style中的width属性就可以.例如, <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  8. 实现span设置宽度（行内元素本来不支持调宽度高度这些样式）（变成行内块元素：display:inline-block;）

    实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...

  9. 表格 td 设置宽度无效问题

    现在有个需求,就是表格的列不固定,都是动态加载的,想给每一列设置宽度,但是设置 width:100xp,没有效果,不过设置min-width:100px 就有效果了,table的宽度为 td的宽度和 ...

随机推荐

  1. mysql主从复制的介绍

    引用:https://my.oschina.net/u/255939/blog/505598 MySQL复制就是一台MySQL服务器(slave)从另一台MySQL服务器(master)进行日志的复制 ...

  2. 推荐10款纯css3实现的实用按钮

    在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...

  3. Linux Ubuntu下软件包管理

    自己整理的一个关于dpkg, apt, aptitude三者的常用命令,方便以后查阅. dpkg: dpkg是用来安装.deb文件,但不会解决模块的依赖关系,且不会关心ubuntu的软件仓库内的软件, ...

  4. gsm at 指令

    一.一般命令 AT+CGMI 给出模块厂商的标识. SONY ERICSSON AT+CGMM 获得模块标识.这个命令用来得到支持的频带(GSM900,DCS1800或PCS1900).当模块有多频带 ...

  5. BusyBox inittab配置

    inittab第一行指定初始化脚本,开启所有应用程序,必须有. ::sysinit:/etc/init.d/rcS 在第一行执行完后,执行剩余行命令,此终端要接受命令交互需开启sh. ::askfir ...

  6. [Django学习]模型

    ORM简介 MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库 ORM是“对象-关系-映射”的简称 ...

  7. Beego 框架学习（一）

    1.特性 beego是一个http框架 高性能,是目前最快的的go框架 开发快捷,组件多,高度解耦 RESTful方式,可以自定义action 文档完整 智能路由.智能监控 2.安装 go get g ...

  8. 也谈谈js的压缩，jquery压缩。【转】

    问题缘由: 负责公司的开发平台研发工作,考虑的知识产权的保护工作,必须要考虑java的加密技术和js脚本的加密技术.在目前java加密很容易破解的情况下,还是先搞定js的加密和压缩,一方面可以提高页面 ...

  9. C++中前置声明的应用与陷阱

    前置声明的使用 有一定C++开发经验的朋友可能会遇到这样的场景:两个类A与B是强耦合关系,类A要引用B的对象,类B也要引用类A的对象.好的,不难,我的第一直觉让我写出这样的代码: // A.h #in ...

  10. 【转】MFC 字体LOGFONT

    Windows的字体LOGFONT LOGFONT是Windows内部字体的逻辑结构,主要用于设置字体格式,其定义如下:typedef struct tagLOGFONTA{    LONG      ...