一、使用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. Drawing Arc Using ArcSegment in XAML

    We can use the Arc XAML element to draw arcs in XAML. Besides drawing arcs using the Arc element, we ...

  2. Prerequisites?[HDU1144]

    Prerequisites?Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...

  3. Vijos1425子串清除 题解

    Vijos1425子串清除 题解   描述: 我们定义字符串A是字符串B的子串当且仅当我们能在B串中找到A串.现在给你一个字符串A,和另外一个字符串B,要你每次从B串中从左至右找第一个A串,并从B串中 ...

  4. HDU 4003 Find Metal Mineral(分组背包+树形DP)

    题目链接 很棒的一个树形DP.学的太渣了. #include <cstdio> #include <string> #include <cstring> #incl ...

  5. 【noiOJ】p8208

    03:切分矩形组 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 给定若干个平行于坐标轴的互不重叠的矩形,矩形的顶点都是整点.要求画一根平行于y轴的直线x=k ...

  6. SQL2043N 与 linux的randomize_va_space特性

    自从数据库服务器从redhat4.6升级到redhat5.5之后,在使用TSM备份的时候偶尔会出现SQL2043N  查看错误: [db2inst1@limt ~]$ db2 ? SQL2043N S ...

  7. 深入浅出 - Android系统移植与平台开发（六）－ 为Android启动加速

    作者:唐老师,华清远见嵌入式学院讲师. Android的启动速度一直以来是他的诟病,虽然现在Android设备的硬件速度越来越快,但是随着新 版本的出现,其启动速度一直都比较慢,当然,作为程序员,我们 ...

  8. Centos 安装 NodeJS

    准备命令: yum -y install gcc make gcc-c++ openssl-devel wget 下载源码及解压: wget http://nodejs.org/dist/v0.10. ...

  9. [zt] Android中使用List列表

    原文地址:http://www.vogella.com/tutorials/AndroidListView/article.html 1. Android and Lists 1.1. Using l ...

  10. C# 安装和卸载 Windows Service

    特别注意: 安装Window Service 的时候,一定要用管理员打开命令提示符(cmd) 1. 创建Windows Service 服务项目 2. Service设计界面:右键-->选择安装 ...