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. Spark shuffle详细过程

    有许多场景下,我们需要进行跨服务器的数据整合,比如两个表之间,通过Id进行join操作,你必须确保所有具有相同id的数据整合到相同的块文件中.那么我们先说一下mapreduce的shuffle过程. ...

  2. 设置maven默认的JDK版本

    在pom文件中添加如下 : <build> <plugins> <plugin> <groupId>org.apache.maven.plugins&l ...

  3. Stanford NLP 学习笔记2：文本处理基础（text processing）

    I. 正则表达式(regular expression) 正则表达式是专门处理文本字符串的正式语言(这个是基础中的基础,就不再详细叙述,不了解的可以看这里). ^(在字符前): 负选择,匹配除括号以外 ...

  4. 【转】PL/SQL Developer各个窗口的功能

    源地址:http://www.codeweblog.com/pl-sql-developer%E5%90%84%E4%B8%AA%E7%AA%97%E5%8F%A3%E7%9A%84%E5%8A%9F ...

  5. Talk about VR

    Virtual reality --VR ,虚拟现实,是利用计算机模拟一个三维空间的世界,提供用户关于各种感官的模拟,让用户感觉身临其境,可以及时,没有限制地观察三维空间内的事物,用户进行位置移动时, ...

  6. session保存用户信息

    前台jsp-------------- <%@ page import="com.manager.form.User" %><%User user = reque ...

  7. 剑指Offer:面试题29——数组中出现次数超过一半的数字(java实现)

    PS:在前几天的面试中,被问到了这个题.然而当时只能用最低效的方法来解. 问题描述: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2, ...

  8. 《疯狂Java讲义》（一） ---- 关于学习Java的反思

    "听到Spring很火,就立马买来一本Spring的书来读,最后结果往往是失败,因为这种学习没有积累,没有根基,学习过程中困难重重,每天都被一些相同.类似的问题所困扰,起初热情十足,经常上论 ...

  9. hbase 协处理器

    一.服务端1.安装Protobuf2.RPC proto 定义文件:Examples.protooption java_package = "org.apache.hadoop.hbase. ...

  10. hashmap两种遍历方法

    第一种:使用entryset来进行遍历 Map map=new HashMap(); Iterator iter=map.entrySet().iterator(); while(iter.hasNe ...