1.行内元素（图片、文本）水平居中

　　通过给父元素设置 text-align:center

html代码：

<body>

  <div class="txtCenter">我想要在父容器中水平居中显示。</div>

</body>

css代码：

<style>

  .txtCenter{

    text-align:center;

  }

</style>

2.定宽块状元素水平居中：块状元素的宽度width为固定值

　　设置“左右margin”值为“auto”来实现

html代码：

<body>

  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>

</body>

css代码：

<style>

div{

    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

    width:200px;/*定宽*/

    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */

}

</style>

3.不定宽块状元素水平居中：块状元素的宽度width不固定

　　1）加入 table 标签

　　　　利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中

html代码：

<div>

 <table>

  <tbody>

    <tr><td>

    <ul>

        <li>我是第一行文本</li>

        <li>我是第二行文本</li>

        <li>我是第三行文本</li>

    </ul>

    </td></tr>

  </tbody>

 </table>

</div>

css代码：

<style>

table{

    border:1px solid;

    margin:0 auto;

}

</style>

　　2）设置 display：inline 方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center

html代码：

<body>

<div class="container">

    <ul>

        <li><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

    </ul>

</div>

</body>

css代码：

<style>

.container{

    text-align:center;

}

/* margin:0;padding:0（消除文本与div边框之间的间隙）*/

.container ul{

    list-style:none;

    margin:0;

    padding:0;

    display:inline;

}

/* margin-right:8px（设置li文本之间的间隔）*/

.container li{

    margin-right:8px;

    display:inline;

}

</style>

　　3）设置 position：relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

　　　　通过给父元素设置 float ，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中

<div class="outer">

   <div class="wrap">

     <div class="inner"></div>

   </div>

</div>

CSS代码为

.wrap{

    float:left;

    position:relative;

    left:50%;

}

.outer{

    width:300px;

    height:400px;

    background:#FFCC99;

}

.inner{

    width:100px;

    height:100px;

    background:#C33;

    position:relative;  /*????*/

    left:-50%;

}

4.父元素高度确定的单行文本垂直居中

　　设置父元素的 height 和 line-heigh 高度一致来实现

<div class="container">

    hi,imooc!

</div>

css代码：

<style>

.container{

    height:100px;

    line-height:100px;

    background:#999;

}

</style>

5.父元素高度确定的多行文本、图片垂直居中

　　使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle

html代码：

<body>

<table><tbody><tr><td class="wrap">

<div>

    <p>看我是否可以居中。</p>

</div>

</td></tr></tbody></table>

</body>

css代码：

table td{height:500px;background:#ccc}

css样式设计的更多相关文章

  1. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  2. bootstrap学习总结-css样式设计(二)

    首先,很感谢各位园友对我的支持,关于bootstrap的学习总结,我会持续更新,如果有写的不对的地方,麻烦各位给我指正出来哈.关于上篇文章,固定布局和流式布局很关键,如果还不太清楚的可以再看看我写的h ...

  3. css 样式设计（一）（ 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 ）

    一.css在线150个例子 http://www.w3cschool.cc/css/css-examples.html 二.背景图片水平方向重复 : body { background-image:u ...

  4. 响应式设计：根据不同设备引不同css样式

    <link rel="stylesheet" media="screen and (max-width:600px)" href="small. ...

  5. Bootstrap3 CSS样式基本用法总结

    按钮 a,input,button都可以设置为按钮 a标签按钮   button标签按钮 <a class="btn btn-default" href="#&qu ...

  6. 权重和层叠规则决定了CSS样式优先级

    一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...

  7. 记一次项目中的css样式复用

    本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e9 ...

  8. Csstyle - 创建简洁、可维护强的 CSS 样式

    Csstyle 是一种现代的方式,用于制作精美的可维护样式表.这个 Csstyle 方法使用 SASS 混入,使你的 CSS 更具可读性和语义,并为你生成选择器,自动处理嵌套等事情. Csstyle ...

  9. CSS样式----图文详解（二）：css属性

    主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 ...

随机推荐

  1. JSP中的隐式对象（implicit object）

  2. This application is modifying the autolayout engine from a background threa－线程错误

    警告提示:This application is modifying the autolayout engine from a background thread, which can lead to ...

  3. C++之路进阶——codevs2492（上帝造题的七分钟 2）

    2492 上帝造题的七分钟 2  时间限制: 1 s  空间限制: 64000 KB  题目等级 : 大师 Master    题目描述 Description XLk觉得<上帝造题的七分钟&g ...

  4. WCF ABC

    参考文献 http://blog.sina.com.cn/s/blog_7358f8b201012pnt.html http://www.cnblogs.com/CodingPerfectWorld/ ...

  5. 【Arduino】使用C#实现Arduino与电脑进行串行通讯

    在给Arduino编程的时候,因为没有调试工具,经常要通过使用串口通讯的方式调用Serial.print和Serial.println输出Arduino运行过程中的相关信息,然后在电脑上用Arduin ...

  6. 一种比较少见的C#代码段

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  7. REST实战：SeverClient项目+RESTful理论

    理解一个新的技术,无疑就是使用它了,下面我们就通过一个可执行的demo来展现REST的原理和使用. 一 Demo 1.1 服务器端 1 主程序MainServer.java负责启动一个REST服务组件 ...

  8. 为mongodb加用户授权并使用RockMongo进行管理

    在刚安装完mongodb后是没有管理员的,如果要为mongodb设置管理员在启动时需要以用户授权的方式启动: /usr/local/webserver/mongodb/bin/mongod --dbp ...

  9. osip状态机分析

    转载于:http://blog.csdn.net/lbc2100/article/details/48342889 OSIP的核心是系统状态机,在不同情况下,系统处于不同的状态,在某一状态下当系统发生 ...

  10. Script 简单语句的练习题

    猜拳 <body>请输入剪刀或者石头或者布:<br /><input type="text" id="A"/><inp ...