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. Git commit 常见用法

        Git commit git commit 主要是将用户通过git add命令添加到暂存区里的改动给提交到本地的版本库,关于版本库的构成可以查看我先前的笔记. 每次提交我们都会在本地版本库生成 ...

  2. cocos2dx 3.x(在Mac平台下利用Eclipse打包安卓apk安装包详细教程)

    最近在学习cocos2dx在MAC上如何打包apk,今天先把安装JDK和ANT的过程记来. 首先,打开终端,输入"java -version" 点击回车后,出现如下提示: 我们的M ...

  3. RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件WinForm业务平台

    RDIFramework.NET ━ .NET快速信息化系统开发框架 工作流程组件WinForm业务平台 接上篇: RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组 ...

  4. 杭电oj 1069 Monkey and Banana 最长递增子序列

    Monkey and Banana Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...

  5. 郑轻校赛题目 问题 G: 多少个0

    问题 G: 多少个0 时间限制: 1 Sec  内存限制: 128 MB提交: 192  解决: 40 题目描述 一个n*n的方格,每个格子中间有一个数字是2或者5,现在从方格的左上角走到右下角,每次 ...

  6. VS2013 密钥

    MXS&Vincene  ─╄OvЁ  &0000017─╄OvЁ  MXS&Vincene MXS&Vincene  ─╄OvЁ:今天很残酷,明天更残酷,后天很美好, ...

  7. Myeclipse8.5 最新注册码以使用方法（可以用到2015年！！！）

    已破解的一组,复制即可!(注册码到2015年哦!) name:LIKEcode:YLR8ZC-855550-6067725176540043 使用方法:把注册码贴到Window-->prefer ...

  8. s3c2440 移值新内核 linux-4.1.36

    arm-linuxgcc version 4.3.2 经过试验,最高可以编译到 linux-4.1.36 ,在高的版本会有错误 ,可能是 GCC 编译器版本较低造成. 解压比较麻烦还要装一个 xz x ...

  9. tomcat普通用户运行

    网站绑定域名后直接通过域名访问使用的是80端口,因此tomcat须监听80端口,而为了安全起见tomcat一般不用root身份运行,综上,需要以普通用户来运行监听80端口的tomcat.此时就会启动失 ...

  10. 微信OAuth2.0网页受权php

    www.MyException.Cn 网友分享于:2014-01-19 浏览:2504次 微信OAuth2.0网页授权php示例 1.配置授权回调页面域名,如 www.aaa.com 2.模拟公众号的 ...