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. Coding过程中遇到的一些bug

    1. 在使用layoutSubviews方法调整自定义view内部的子控件坐标时,最好不要使用子控件的centerX,centerY属性,否则会出现奇怪的bug. 如果一定要用,务必仔细检查,该子控件 ...

  2. Oracle在dos命令下导出导入

    DOS下运行的命令,也可以加参数在SQL/PLUS环境下运行简单例子实现 单表备份(前提库的结构是一样的)导出:开始钮->运行->输入CMD->进入DOS界面EXP 用户名/密码@连 ...

  3. 如何快速建立一个测试资源Web服务器及异步获取资源（Unity3D）

    背景 1.最近看了几位专栏作家的文章,几篇提到了资源通过网络的动态获取.如何建立一个快速的测试环境,不免是一个问题,也就最简单的就是假设http服务器了,微软系的当然首选的IIS了,别的也能用阿帕奇或 ...

  4. python IDE

    提供给开发者 10 款最好的 Python IDE http://www.oschina.net/news/57468/best-python-ide-for-developers vim windo ...

  5. ligerui_ligerTree_006_ligerui事件支持

    ligerui:ligerTree事件支持: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 效果图: 代码:json.txt [ ...

  6. 【002： NetBeans 的 代码补全】

    在 代码完成中,输入如下内容 q;w;e;r;t;y;u;i;o;p;a;s;d;f;g;h;j;k;z;x;c;v;b;n;m;Q;W;E;R;T;Y;U;I;O;P;A;S;D;F;G;H;J;K ...

  7. 说一下linux中shell的后台进程与前台进程

    环境: 操作系统:archlinux; 终端模拟器:rxvt-unicode(urxvt); shell:bash; 这里所说的后台进程是指在命令行后面加一个 ampersand(&),前台进 ...

  8. [Zend]设置ZendStudio编辑器配色

    首先,菜单栏–help–install new software… 接着,添加一个更新源,就是点击界面的add按钮,在新窗口的location位置输入http://eclipse-color-them ...

  9. 解决ADB端口占用问题

    方式一5037为adb默认端口,若5037端口被占用,查看占用端口的进程PIDC:\Users\wwx229495>netstat -aon|findstr 5037   TCP    127. ...

  10. 在页面关闭或者刷新的时候触发 onbeforeunload

    该实例演示了如何使用 HTML DOM 向 body 元素添加 "onbeforeunload" 事件. 关闭当前窗口,按下 F5 或点击以下链接触发 onbeforeunload ...