DIV水平自适应居中

 <!DOCTYPE html>

 <html lang="cn">

 <head>

 <meta charset="utf-8"/>

 <title>如何自适应宽度的水平居中</title>

 <style>.navbar{margin:20px 0;}.navbar ul{margin:0;padding:20px;list-style:none;border-radius:8px;background:#eee;box-shadow:0 0 2px rgba(0,0,0,0.4) inset;}.navbar li{margin:0;padding:0;}.navbar a{display:block;padding:6px 10px;border-radius:12px;color:#111;background:#ccc;font:bold 1em/1 Arial,Helvetica,sans-serif;text-decoration:none;}.navbar a:hover,.navbar a:focus{color:#fff;background:#333;}.center-1{text-align:center;}.center-1 ul{display:inline-block;}.center-1 li{float:left;}.center-1 li+li{margin-left:20px;}.center-2{overflow:hidden;}.center-2>div{position:relative;left:50%;float:left;}.center-2 ul{position:relative;left:-50%;float:left;}.center-2 li{float:left;}.center-2 li+li{margin-left:20px;}.center-3{display:table;margin:20px auto;padding:20px;list-style:none;border-radius:8px;background:#eee;box-shadow:0 0 2px rgba(0,0,0,0.4) inset;}.center-3 li{display:table-cell;}.center-3 li+li{padding-left:20px;}.center-4{text-align:center;}.center-4>ul{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex;}.center-4 li+li{margin-left:20px;}.ggsd{width:728px;margin:0 auto;}</style>

 </head>

 <body>

 <div id="body">

 <h2>水平居中 <code>display:inline-block</code></h2>

 <div class="navbar center-1">

 <ul>

 <li><a href="/">Home</a></li>

 <li><a href="/">About us</a></li>

 <li><a href="/">Our products</a></li>

 <li><a href="/">Customer support</a></li>

 <li><a href="/">Contact</a></li>

 </ul>

 </div>

 <h2>水平居中 <code>position:relative</code></h2>

 <div class="navbar center-2">

 <div>

 <ul>

 <li><a href="/">Home</a></li>

 <li><a href="/">About us</a></li>

 <li><a href="/">Our products</a></li>

 <li><a href="/">Customer support</a></li>

 <li><a href="/">Contact</a></li>

 </ul>

 </div>

 </div>

 <h2>水平居中 <code>display:table</code></h2>

 <ul class="navbar center-3">

 <li><a href="/">Home</a></li>

 <li><a href="/">About us</a></li>

 <li><a href="/">Our products</a></li>

 <li><a href="/">Customer support</a></li>

 <li><a href="/">Contact</a></li>

 </ul>

 <h2>水平居中 <code>display:inline-flex</code></h2>

 <div class="navbar center-4">

 <ul>

 <li><a href="/">Home</a></li>

 <li><a href="/">About us</a></li>

 <li><a href="/">Our products</a></li>

 <li><a href="/">Customer support</a></li>

 <li><a href="/">Contact</a></li>

 </ul>

 </div>

 <h2>水平居中 <code> fit-content</code></h2>

 <div class="navbar center">

 <ul>

 <li><a href="/">Home</a></li>

 <li><a href="/">About us</a></li>

 <li><a href="/">Our products</a></li>

 <li><a href="/">Customer support</a></li>

 <li><a href="/">Contact</a></li>

 </ul>

 </div>

 </div>

 </body>

 </html>

CSS实现DIV水平自适应居中的更多相关文章

  1. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  2. css+div上下左右自适应居中

    主要记录自己日常积累的布局相关的东西,持续更新中. 1.登录框上下左右自适应居中 以前想要把登录表单始终放置在页面的中间,花了不少心思,一直以来用的解决方法都是用js,感觉有点麻烦不是很好,于是在网上 ...

  3. HTML/CSS：div水平与元素垂直居中（2）

    单个div水平居中:设置margin的左右边距为自动 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中 ...

  4. css让div水平垂直居中

    示例1: .div1{ width:200px; height:300px; border:1px solid #000; position: relative; } .div2{ width: 40 ...

  5. CSS实现div高度自适应

    1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的 ...

  6. CSS实现DIV水平 垂直居中-1

    水平大家都知道,一般固定宽度给个margin:0 auto:就可以了.下面实现水平垂直都居中 HTML <div class="parent"> </div> ...

  7. 实现CSS样式垂直水平完全居中

    1.水平居中 a.内联元素(inline or inline-*)居中? 你可以让他相对父级块级元素居中对齐 .center-children { text-align: center; } b.块级 ...

  8. css实现div水平垂直居中

    中秋快到了,祝大家中秋快乐. 平时大家写bug过程中肯定会遇到让div框水平或者垂直居中,然而有时候能居中,有时候不能居中.我把平时遇到的一些方法写出来,如果对你有用,那便是晴天. 1.text-al ...

  9. css中div高度自适应

    高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...

随机推荐

  1. 安装Oracle报错，全部为未知！

    安装Oracle一开始就报错:需要将以下日志文件发送给管理员,<未知><未知><未知>. 这种问题需要对oracle的setup.exe设置 兼容性.具体如下图:

  2. bug_ _org.json.JSONException: End of input at character 0 of

    10-16 18:28:39.549: W/System.err(4950): org.json.JSONException: End of input at character 0 of 10-16 ...

  3. JS 继承总结

    ES里面没有真正的继承,但是能通过某些手段达到继承效果,从而让一个类拥有另外一个类的方法  类 =>构造函数 继承描述某语言环境---魔兽世界 哈!其实我没玩过  魔兽世界里面 有Humen类  ...

  4. Java的线程安全

    线程安全 我们这里讨论的线程安全,就限定于多个线程之间存在共享数据访问这个前提,因为如果一段代码根本不会与其他线程共享数据,那么从线程安全的角度来看,程序是串行执行还是多线程执行对它来说是完全没有区别 ...

  5. delphi 文件删除，复制

    这是个相对简单的方法,不知道能不能帮到你删除:procedure TForm1.Button1Click(Sender: TObject);begin deletefile('c:\123.txt') ...

  6. 实体写到redis写不进去--误把类当成实体类

    之前一直都把实体写入redis都没有问题,今天再次这样干,结果却是怎么写都写不进去,redis里的值老是为空 最后才发现把类当成了实体类,当然写不进去了. 把类: /// <summary> ...

  7. Struts2：效验器——声明式

    就是用xml配置的方式,而不是Java代码的形式,那个是“编程式” Action: package org.ah.s2; import com.opensymphony.xwork2.ActionSu ...

  8. DataURL详解--转自格桑blog

    DataURI详解 Posted on 2013 年 09 月 09 日 by admin DataURI,不算新东西,却一直没用过,前些日子在webapp中用了点DataURI,就做了下相关的了解, ...

  9. 学习总结——Selenium元素定位

    读一本好书,不能读读就算了,做一下总结,变成自己的,以备查阅. 1.         driver.findElement(By.id(<element ID>)) ID是独一无二的,使用 ...

  10. JS实现div动态水平垂直居中

    在做页面的过程中,在很多地方都会遇到元素需要水平垂直的居中这个问题,之前总是去网上搜别人的代码,今天仔细研究了一下,分享给大家,先写一个简单的例子: <div class="mui-c ...