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. 关于STM32的FLASH操作【转载】

    说到STM32的FLSAH,我们的第一反应是用来装程序的,实际上,STM32的片内FLASH不仅用来装程序,还用来装芯片配置.芯片ID.自举程序等等.当然, FLASH还可以用来装数据. FLASH分 ...

  2. CDC和HDC的区别与转换

    CDC和HDC的区别与转换 一.区别与联系HDC是句柄:CDC是MFC封装的Windows   设备相关的一个类:CClientDC是CDC的衍生类,产生对应于Windows客户区的对象HDC是WIN ...

  3. Python的第三天

    一.字典 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中 ,格式如下所示: ...

  4. Hibernate5.2关联关系之单向多对一(二)

    Hibernate5.2之单向一对多(二) 一. 简介 在本篇博文中笔者会在上一篇博客的代码基础上进行修改,本篇文章将介绍单向的一对多. 二. hbm文件的方式 Customer.hbm.xml &l ...

  5. mysql replication

    change master to master_host='192.168.0.3',master_user='myrepl',master_password='5rNUnOHxut3lkP4wXds ...

  6. WinRAR压缩操作帮助类

    //------------------------------------------------------------------------------------- // All Right ...

  7. c++指针与引用问题

    本来是回答问题的,到这里做个笔记 *&L是指针的引用,实参是个指针.所以L是实参指针的别名,对别名L的修改,等于对实参的修改.*L是传值,你无法改变传过来的实参指针变量的值程序代码: #inc ...

  8. phpinfo有mysqlnd没有mysql

    这个着实是个坑,使用phpinfo查看,明明有mysqlnd这个项目,就是找不到mysql.以前用直接运行php.exe的方法可以看到错误,可是这次就没有任何错误. 中间把php的安装路径添加到了系统 ...

  9. webapp之meta

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  10. matlab的滤波器仿真——低通滤波器与插值滤波器

    项目里面有用到插值滤波器的场合,用matlab做了前期的滤波器性能仿真,产生的滤波器系数保存下来输入到FPGA IP中使用即可. 下面是仿真的代码 % clear all close all Nx = ...