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

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

2、定宽块状元素 ；

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

二、具体解决方法。

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

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

2、定宽块状元素 ：

  1. <style>
  2. div{
  3.      border:1px solid blue;
  4.      width:350px;
  5.      height:20px;
  6.      margin:20px auto;  /*水平居中：上下方向有20px的margin值，左右方向的等margin值由浏览器自动设置*/
  7.    }
  8. </style>
  9. <body>
  10.       <div>这是个定宽块状元素，居中显示</div>
  11. </body>

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

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

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

  1. <style>
  2.      .container{text-align:center;}
  3.      .container ul{
  4.                     list-style:none;
  5.                     margin:0;
  6.                     padding:0;
  7.                     display:inline;
  8.                   }
  9.      .container li{
  10.                     margin-right:8px;
  11.                     display:inline;
  12.                   }
  13. </style>
  14. <body>
  15.     <div class="container">
  16.       <ul>
  17.          <li>1</li>
  18.          <li>2</li>
  19.          <li>3</li>
  20.       </ul>
  21.     </div>
  22. </body>

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

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

  1. <style>
  2.      .container{
  3.                         float:left;
  4.                         position:relative;
  5.                         left:50%;
  6.                     }
  7.      .container ul{
  8.                            list-style:none;
  9.                            margin:0;
  10.                            padding:0;
  11.                            position:relative;
  12.                            left:-50%;
  13.                        }
  14.      .container li{
  15.                            display:inline;
  1.                            float:left;     /*有无都可*/
  1.                        }
  2. </style>
  3. <body>
  4.     <div class="container">
  5.       <ul>
  6.          <li>1</li>
  7.          <li>2</li>
  8.          <li>3</li>
  9.       </ul>
  10.     </div>
  11. </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. ZOJ3229 Shoot the Bullet（有源汇流量有上下界网络的最大流）

    题目大概说在n天里给m个女孩拍照,每个女孩至少要拍Gi张照片,每一天最多拍Dk张相片且都有Ck个拍照目标,每一个目标拍照的张数要在[Lki, Rki]范围内,问最多能拍几张照片. 源点-天-女孩-汇点 ...

  2. Linux chkconfig 命令详解

    一.简介 chkconfig 命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 二.安装&启动 us ...

  3. 基于单决策树的AdaBoost

    ①起源:Boosting算法 Boosting算法的目的是每次基于全部数据集,通过使用同一种分类器不同的抽取参数方法(如决策树,每次都可以抽取不同的特征维度来剖分数据集) 训练一些不同弱分类器(单次分 ...

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

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

  5. Hightcharts设置Y轴最大最小值

    有两种方法: 1:是在控件初始化时预设, yAxis: [{ max:}] 2:在程序运行中动态更新设置 thChart.yAxis[].update({ min: , max: });

  6. 五、点数器《苹果iOS实例编程入门教程》

    该app为应用的功能为一个简单的数数程序 现版本 SDK 8.4 Xcode 运行Xcode 选择 Create a new Xcode project ->Single View Applic ...

  7. windows开机启动项

    原来就一个命令呀:msconfig 1.在开始菜单中输入 msconfig 命令,回车 2.在弹出的对话框中取消不想启动的程序 3.点击应用->确定->不启动

  8. Version=1.0.0.0, Culture=neutral, PublicKeyToken=null

    What it is saying is, it found the DLL, but it couldn't find a type named "namespace.User" ...

  9. js判断移动端系统

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

  10. 李洪强iOS经典面试题125

    1.objective-c 是所有对象间的交互是如何实现的? 在对象间交互中每个对象承担的角色不同,但总的来说无非就是"数据的发送者"或"数据的接收者"两种角色 ...