一、使用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. jquery上传文件控件Uploadify

    基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...

  2. myeclipse操作记录

    myeclipse里面jsp页面里面js注释快捷键 ctrl + shift +cctrl + / MyEclipse 每次保存都要building workspace的解决方法 方法一:菜单栏-&g ...

  3. [Cocos2d-x For WP8]Scene场景

         场景(CCScene) 在游戏里,场景就是关卡. CCScene是app工作流程上独立块,一个app可能拥有多个scene,但是在任何时候只能有一个是激活状态的.一个CCScene对象由一个 ...

  4. win8.1上wamp环境中利用apache自带ab压力测试工具使用超简单讲解

    2015.10.4apache自带ab压力测试工具使用:本地环境:win8.1 wampserver2.5 -Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b 可以参考一 ...

  5. NOI 题库 1792

    1792  迷宫 描述 一天Extense在森林里探险的时候不小心走入了一个迷宫,迷宫可以看成是由n * n的格点组成,每个格点只有2种状态,.和#,前者表示可以通行后者表示不能通行.同时当Exten ...

  6. C#图片处理---基础

    简单的图片剪裁 using System; using System.Drawing; using System.Drawing.Drawing2D; using System.IO; namespa ...

  7. C语言中常量

    C语言中常量 不具有数据类型的常量------宏常量 宏常量定义:用一个标识符号来表示的常量,又称为符号常量. 宏定义:  #define 标识符  字符串                 ----- ...

  8. RSA_RSA算法原理（二）

    上一次,我介绍了一些数论知识. 有了这些知识,我们就可以看懂RSA算法.这是目前地球上最重要的加密算法. 六.密钥生成的步骤 我们通过一个例子,来理解RSA算法.假设爱丽丝要与鲍勃进行加密通信,她该怎 ...

  9. 再说memcache的multiget hole（无底洞）

    关键词:multiget hole,memcache 适用于:java,php 基础知识背景: 1)multiget 是什么:     multiget 指的是从 memcache(或其他分布式缓存) ...

  10. 几种常用的JS类定义方法

    几种常用的JS类定义方法   // 方法1 对象直接量var obj1 = {    v1 : "",    get_v1 : function() {        return ...