一、使用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. Codeforces 615C Running Track（DP + Trie树）

    题目大概说给两个串,问最少要用多少个第一个串的子串(可以翻转)拼成第二个串. UVa1401,一个道理..dp[i]表示前缀i拼接成功所需最少的子串,利用第一个串所有子串建立的Trie树往前枚举转移. ...

  2. POJ2711 Leapin' Lizards（最大流）

    比较形象的是地图每个点都拆成三个点,这三个点限制流量为0或1,于是再一分为二,这样每个点都被拆成6个点... 其实拆两个点,连容量为柱子高的边,这样就行了.. 这题我掉坑了,“1 lizard was ...

  3. PHP初学[DAY2]

    昨天安装了PHP的开发环境,根据一个百度经验里的介绍做的,可惜链接找不着了.目前状况是这样:在Apache24下有一个www的文件夹,通过编辑里边的index.php来学习PHP程序的编写,程序运行的 ...

  4. next_permutation函数

    这是一个求一个排序的下一个排列的函数,可以遍历全排列,要包含头文件<algorithm>下面是以前的笔记    与之完全相反的函数还有prev_permutation  (1) int 类 ...

  5. 【BZOJ】2876: [Noi2012]骑行川藏

    题意 给出\(s_i, k_i, v_i', E\),满足\(\sum_{i=1}^{n} k_i s_i ( v_i - v_i' )^2 \le E, v_i > v_i'\),最小化$ \ ...

  6. Rational Rose 2007 破解版安装过程

    Rational Rose 2007 破解版安装过程 首先通过网站将软件下载,然后依照以下步骤进行: 选择第二项,下一步 一直点击next,出现如下,可以修改安装的目的文件夹 设置完路径之后出现如下, ...

  7. Android在智能终端领域的关键技术专题讲座（成都站）

    Android系统引领了终端智能化的浪潮,在民用.公 共及工业等诸多领域得到了广泛的应用,涉及手持终端.电视.汽车导航.工业控制等,在云计算.设备智能化等方面表现卓越.Android也凭借着自身的优 ...

  8. Java_Servlet 中文乱码问题及解决方案剖析

    一.常识了解 1.GBK包含GB2312,即如果通过GB2312编码后可以通过GBK解码,反之可能不成立; 2.java.nio.charset.Charset.defaultCharset() 获得 ...

  9. 将bootstrap弹出框的点击弹出改为鼠标移入弹出

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. css解决select下拉表单option高度的办法

    css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好 ...