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. soap和http的区别

    Http get,post,soap协议都是在http上运行的1)get:请求参数是作为一个key/value对的序列(查询字符串)附加到URL上的查询字符串的长度受到web浏览器和web服务器的限制 ...

  2. Vcenter server 5.5克隆模板(创建ISO镜像)

    1.进入Vcenter server 5.5控制台 --- 选择虚拟机和模版. 2.右键 XP_32 --- 模版 ---- 克隆为模板(Vcenter server 5.5连接的VMware ESX ...

  3. Mysql----------的一些常用命令

    1.查询一张表中某个字段重复值的记录 select id,cert_number from (select id,cert_number,count(*)as n from 表明 group by c ...

  4. jquery入门学习笔记

    还是先来个例子: <div id="div1" class="box">div</div> <ul> <li>& ...

  5. struts2实现文件上传、多文件上传和文件下载

    总结的两个问题,就是struts2上传下载的时候对属性名配置要求非常严格: 第一:上传的时候 private File file; private String fileContentType; pr ...

  6. 反射调用方法时的两种情况，走get set和不走get set

    @Test public void test1() throws Exception{  //获取User类  Class class1=Class.forName("cn.jbit.bea ...

  7. Linux 的字符串截取方法(转)

    Linux 的字符串截取很有用.有八种方法. 假设有变量 var=http://www.aaa.com/123.htm. 1. # 号截取,删除左边字符,保留右边字符. echo ${var#*//} ...

  8. UnicodeDecodeError: 'utf8' codec can't decode byte 0xce in position 47: invalid continuation byte

  9. 161214、oracle查询表信息

    1.查找表的所有索引(包括索引名,类型,构成列): select t.*,i.index_type from user_ind_columns t,user_indexes i where t.ind ...

  10. gulp watch error ENOSPC

    in linux you fix this with the command:echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sy ...