一、使用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. css初始化样例代码

    /* css reset www.admin10000.com */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fields ...

  2. UVa11082 Matrix Decompressing（最小费用最大流）

    题目大概有一个n*m的矩阵,已知各行所有数的和的前缀和和各列所有数的和的前缀和,且矩阵各个数都在1到20的范围内,求该矩阵的一个可能的情况. POJ2396的弱化版本吧..建图的关键在于: 把行.列看 ...

  3. POJ3613 Cow Relays（矩阵快速幂）

    题目大概要求从起点到终点恰好经过k条边的最短路. 离散数学告诉我们邻接矩阵的k次幂就能得出恰好经过k条路的信息,比如POJ2778. 这题也一样,矩阵的幂运算定义成min,而min满足结合律,所以可以 ...

  4. ggplot2包--R可视化

    1.ggplot2发展历程 ggplot2是Hadley在爱荷华州立大学博士期间的作品,也是他博士论文的主题之一,实际上ggplot2还有个前身ggplot,但后来废弃了,某种程度上这也是Hadley ...

  5. linux内存分配

    在linux的内存分配机制中,优先使用物理内存,当物理内存还有空闲时(还够用),不会释放其占用内存,就算占用内存的程序已经被关闭了,该程序所占用的内存用来做缓存使用,对于开启过的程序.或是读取刚存取过 ...

  6. 安装SQL2008 提示 创建usersettings/microsoft.sqlserver.configuration.landingpage.properties.se

    System.Configuration.ConfigurationErrorsException: 创建 userSettings/Microsoft.SqlServer.Configuration ...

  7. django 数据库交互

    修改配置文件 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'USER':'root', 'PASSWORD':'1 ...

  8. BZOJ3161 : 孤舟蓑笠翁

    显然求出每个点到所有关键点的最短路和次短路即可,答案就是每个关键点的次短路. 设$f[i][j][0]$表示左手在$i$,右手在$j$的解,$f[i][j][1]$表示左手在$i$,右手在$j$,且左 ...

  9. objective-c 多线程注意的问题

    1.资源竞争:当每个线程都去访问同一段内存时,会导致所谓i资源竞争问题,这时候可以通过“@synchronized block”将实例变量包围起来,创建一个互斥锁, 这样你就可以确保在互斥锁中的代码一 ...

  10. 《深入理解Windows Phone 8.1 UI控件编程》基于最新的Runtime框架

    <深入理解Windows Phone 8.1 UI控件编程>本书基于最新的Windows Phone 8.1 Runtime SDK编写,全面深入地论述了最酷的UI编程技术:实现复杂炫酷的 ...