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. [asp.net]c# winform打印类

    using System; using System.Collections.Generic; using System.Text; using System.Windows.Forms; using ...

  2. 黄聪：路由器WIFI连接无法正常访问个别网站及发送图片

    打开路由,路由默认MTU是1500,改成1472 就解决了

  3. 关于import caffe出错的解决

    [http://blog.csdn.net/wuzuyu365/article/details/52431062]关于在caffe下,import caffe报错的解决:conda install p ...

  4. VS里统计整个解决方案代码行数的方法

    VS里统计整个解决方案代码行数,在查找里输入正则表达式:b*[^:b#/]+.*$.如下图所示: 结果如下图所示:

  5. SQL: ROW_NUMBER

  6. CentOS 7 用户怎样安装 LNMP（Nginx+PHP+MySQL）

    关于 Nginx (发音 “engine x”)这是一款免费.开源.高效的 HTTP 服务器,Nginx是以稳定著称,丰富的功能,结构简单,低资源消耗.本教程演示如何在CentOS 6.5服务器(适用 ...

  7. <2016-1-29>

    1.打电话,发短信,发邮件 //打电话 <script> function call(){ var call = new CallManage(); call.call('10086'); ...

  8. git usage:常用git命令

    最近在改TV media相关的测试用例,需要在git上维护相关的脚本,把常用命令总结如下,方便以后使用. 1. 从已有git服务器上clone到本地, 首先进入用户根目录: cd ~ 然后进行clon ...

  9. jQuery MiniUI开发系列之：使用API文档

    jQuery MiniUI在组件设计上,是简约.独立的,没有复杂的继承体系. 比如使用DataGrid,可以在api文档的datagrid部分,查找到datagrid的所有属性.方法.事件,而无需关注 ...

  10. 【Python】【学习笔记】持续更新

    调用模块的两种方式: #方式1 from decimal import Decimal Decimal('1.00') #方式2 import decimal decimal.Decimal('1.0 ...