一、使用CSS水平居中的三种情况 。

1、行内元素（文本、图片等）；

2、定宽块状元素 ；

3、不定宽块状元素（3种方法）；

二、具体解决方法。

1、行内元素（文本、图片等）：

给父元素设置 text-align：center;

2、定宽块状元素 ：

<style>

div{

     border:1px solid blue;

     width:350px;

     height:20px;

     margin:20px auto;  /*水平居中：上下方向有20px的margin值，左右方向的等margin值由浏览器自动设置*/

   }

</style>

<body>

      <div>这是个定宽块状元素，居中显示</div>

</body>

3、不定宽块状元素（3种方法）：

（1）为需要水平居中的元素加table标签；然后为table设置样式： table{margin:0 auto;}

（2）将块级元素转换为内联元素（eg：div{display：inline；}）；然后使用text-align:center;来实现居中

<style>

     .container{text-align:center;}

     .container ul{

                    list-style:none;

                    margin:0;

                    padding:0;

                    display:inline;

                  }

     .container li{

                    margin-right:8px;

                    display:inline;

                  }

</style>

<body>

    <div class="container">

      <ul>

         <li>1</li>

         <li>2</li>

         <li>3</li>

      </ul>

    </div>

</body>

（3）给父元素设置float:left; position:relative; left:50%;

子元素设置position:relative; left:-50%  来实现水平居中

<style>

     .container{

                        float:left;

                        position:relative;

                        left:50%;

                    }

     .container ul{

                           list-style:none;

                           margin:0;

                           padding:0;

                           position:relative;

                           left:-50%;

                       }

     .container li{

                           display:inline;
                           float:left;     /*有无都可*/
                       }

</style>

<body>

    <div class="container">

      <ul>

         <li>1</li>

         <li>2</li>

         <li>3</li>

      </ul>

    </div>

</body>

CSS水平居中的更多相关文章

  1. css水平居中那点事

    昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好...这样以后也有利 ...

  2. css水平居中，竖直居中技巧（二）

    css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  3. css水平居中，竖直居中技巧（一）

    css水平居中,竖直居中技巧(一)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  4. css水平居中的各种方法

    说到水平居中,大家可能觉得很简单啊,text-align:center 就OK了. 但是,有时候会发现这样写了也没出效果.原因是什么呢?  请往下看. 水平居中:分为块级元素居中和行元素居中 行内元素 ...

  5. CSS水平居中/垂直居中的N个方法

    我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...

  6. CSS水平居中和垂直居中解决方案

    一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...

  7. CSS 水平居中

    一.水平居中:行内元素解决方案 居中元素:文字.链接以及其它行内元素(inline或inline-*类型的元素,如inline-block,inline-table,inline-flex)解决方案: ...

  8. CSS 水平居中/布局 垂直居中 （月经问题）

    水平居中 如果它是一个行内元素 对其父元素使用 text-align:center 即可实现. <p style = " text-align:center; width:300px; ...

  9. CSS 水平居中与垂直居中

    前言 在CSS布局中,水平居中与垂直居中一直是用到比较多的,在本篇中将介绍水平居中.垂直居中的几种方式. 示例 HTML: <div class="parent"> & ...

随机推荐

  1. 把文本框嵌入到form

    <form action="/submit-cat-photo"> <input type="text" placeholder=" ...

  2. EF框架step by step(2)—Model-First

    这一篇主要说一下EF框架中,Model First做法,仍然采用上一篇的案例.但增加评论功能.首先打开Blog.edmx文件,在空白处右键,添加新实体Comment,如下图示: 点击确定,关闭窗口. ...

  3. thrift 学习

    入门教程: http://blog.zhengdong.me/2012/05/10/hello-world-by-thrift-using-java

  4. datanode启动不了

    报如下异常:*org.apache.hadoop.ipc.RemoteException(org.apache.hadoop.hdfs.server.protocol.DisallowedDatano ...

  5. Android 在线更新apk

    1.获取当前包的信息: 1 PackageManager manager = Main.this.getPackageManager(); 2 try { 3 PackageInfo info = m ...

  6. ACM: HDU 5418 Victor and World - Floyd算法+dp状态压缩

    HDU 5418 Victor and World Time Limit:2000MS     Memory Limit:131072KB     64bit IO Format:%I64d & ...

  7. JSP 基础概念归纳 5分钟看完

    1. 符合 j2ee 标准的 web-app 的目录结构 WEB-INF classes web.xml lib servlet 开发过程 从 httpservlet 继承, 重写 doget / d ...

  8. ThinkPHP3.2.3--Linux服务器首页文件index.php路径配置问题

    在windows服务器环境下,可以define ('SITE_URL','http://192.168.1.101/'); 但上传到linux服务器环境下不能正常解析,可使用相对路径:define ( ...

  9. C#后台如何获取客户端访问系统型号

    ASP.NET获取客户端.服务器端基础信息 . 在ASP.NET中专用属性: 获取服务器电脑名:Page.Server.ManchineName 获取用户信息:Page.User 获取客户端电脑名:P ...

  10. [CareerCup] 15.6 Entity Relationship Diagram 实体关系图

    15.6 Draw an entity-relationship diagram for a database with companies, people, and professionals (p ...