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. Mysql5.5源码安装步骤笔记记录

    1.cmake软件的安装wget https://cmake.org/files/v3.5/cmake-3.5.0-rc3.tar.gztar xf cmake-3.5.0.tar.gzcd cmak ...

  2. My Interface

    一.创建Myinterface接口 public interface Myinterface { static final String MyifName="我的接口"; stat ...

  3. hadoop2升级的那点事情(详解)

    前言 前阵子,公司的hadoop从hadoop1.02升级到hadoop2.4.1,记录下升级的步骤和遇到的问题,和大家分享,希望别人可以少走一些弯路 技术选型 当前使用版本:     apache ...

  4. java解析命令行参数(common-cli)练习

    package foo; import org.apache.commons.cli.BasicParser; import org.apache.commons.cli.CommandLine; i ...

  5. day4 函数

    面向对象:-->类-->class面向过程:-->过程-->def函数式编程:-->函数-->def 函数是逻辑结构化和过程化的一种编程方法 使用函数的三大优点:减 ...

  6. Druid数据库连接池配置

    DRUID是阿里巴巴开源平台上一个数据库连接池实现,它结合了C3P0.DBCP.PROXOOL等DB池的优点,同时加入了日志监控,可以很好的监控DB池连接和SQL的执行情况,可以说是针对监控而生的DB ...

  7. 使用Spring配合Junit进行单元测试的总结

    最近公司的项目和自己的项目中都用到了spring集成junit进行单元测试,总结一下几种基本的用法: 1.直接对spring中注入的bean进行测试(以DAO为例): 在测试类上添加@RunWith注 ...

  8. QQ右下角浮动窗口

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  9. Delphi 查找标题已知的窗口句柄，遍历窗口控件句柄(转)

    用我的方法来控制其他程序窗体上的窗口控件,必须先了解什么是 回调函数.我的理解是这样的: 回 调函数写出来不是自己的程序去调用的,反而是让其他的东西去调用,比如windows操作系统,比如其他的程序等 ...

  10. LAMP_01_Win下安装配置MySql

    1.解压Mysql server到D盘配置环境变量MYSQL_HOME      D:\J2EE\apache-ant-1.9.7PATH            %MYSQL_HOME%\bin; 2 ...