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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style>
  7.     ul{
  8.       margin:0 auto;
  9.     }
  10.     li{
  11.       list-style: none;
  12.       float: left;
  13.       margin-right: 10px;
  14.     }
  15.   </style>
  16. </head>
  17. <body>
  18.  
  19. <div class="navbar center">
  20.   <ul>
  21.     <li><a href="/">首页</a></li>
  22.     <li><a href="/">关于我们</a></li>
  23.     <li><a href="/">产品展示</a></li>
  24.     <li><a href="/">客户支持</a></li>
  25.     <li><a href="/">联系我们</a></li>
  26.   </ul>
  27. </div>
  28.  
  29. </body>
  30. </html>

　　效果如下：

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style>
  7.     ul{
  8.       width: -moz-fit-content;
  9.       width: fit-content;
  10.       margin:0 auto;
  11.     }
  12.     li{
  13.       list-style: none;
  14.       float: left;
  15.       margin-right: 10px;
  16.     }
  17.   </style>
  18. </head>
  19. <body>
  20.  
  21. <div class="navbar center">
  22.   <ul>
  23.     <li><a href="/">首页</a></li>
  24.     <li><a href="/">关于我们</a></li>
  25.     <li><a href="/">产品展示</a></li>
  26.     <li><a href="/">客户支持</a></li>
  27.     <li><a href="/">联系我们</a></li>
  28.   </ul>
  29. </div>
  30.  
  31. </body>
  32. </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. CentOS 挂载NTFS

    直接在CentOS上挂载NTFS,报错支持ntfs格式: mount: unknown filesystem type 'ntfs' 原因:无法使用Kernel NTFS Module挂载Window ...

  2. HttpClient-4.3.X 中get和post方法使用

    转自:http://linhongyu.blog.51cto.com/6373370/1538672 一.简介 HttpClient是Apache Jakarta Common下的子项目,用来提供高效 ...

  3. C++报错集锦

    (一)invalid initialization of non-const reference of type 'float&' from a temporary of type 'floa ...

  4. jQuery插件 -- 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

  5. Hibernate基本原理（一）

    在开始学hibernate之前,一直就有人说:Hibernate并不难,无非是对JDBC进一步封装.一句不难,难道是真的不难还是眼高手低? 如果只是停留在使用的层面上,我相信什么技术都不难,看看别人怎 ...

  6. tp-03 模板显示

    方式模板:$this->display(); 每当建立一个控制器  都要在view建立一个名字相对应的文件夹   在建立相对于的页面.

  7. CSS 超出隐藏实现限制字数的功能代码(多浏览器支持)

    <html> <title>css控制字数</title> <head> <style type="text/css"> ...

  8. 45本免费的JavaScript书籍资源收集

    JavaScript目前变得越来越流行,已经变成了Web开发必备的语言,加之其跨平台的特性,使得在一切皆为JavaScript的移动互联网时代大有作为. 同时,我们看到,在过去的这一年的软件开发中,J ...

  9. Stay hungry, stay foolish. 求知若饥，虚心若愚。

    如果留意我博客的朋友,应该都有看到这句话在我的自我介绍栏目存在了好长一段时间了,另外,我的 QQ.旺旺.MSN等都有这个签名.Stay hungry, stay foolish.(求知若饥,虚心若愚) ...

  10. 无限级分类 mysql设计