模型

---恢复内容开始---

行内元素-水平居中：如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。（例如.textCenter{text-align:center;}）

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>定宽块状元素水平居中</title>
 6 <style>
 7 div{
 8     border:1px solid red;
 9     margin:20px;
10 }
11 .txtCenter{
12     text-align:center;
13 }
14 .imgCenter{text-align:center;}
15 </style>
16 </head>
17 
18 <body>
19 <div class="txtCenter">我想要在父容器中水平居中显示。</div>
20 
21 <!--下面是任务部分-->
22 
23 <div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div>
24 </body>
25 </html>

块状元素

水平居中-定宽块元素：1 margin要左右相等（margin为auto） 2 width要固定，满足两个条件才能水平居中

p{width:20px;margin:20px,auto;}

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>定宽块状元素水平居中</title>
 6 <style>
 7 div{
 8     border:1px solid red;
 9     
10     width:200px;
11     margin:20px auto;
12 }
13 
14 </style>
15 </head>
16 
17 <body>
18 <div>我是定宽块状元素，我要水平居中显示。</div>
19 </body>
20 </html>

水平居中-不定宽块居中

  1. 加入 table 标签
  2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
  3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

一：加入<table></table>,<tbody></tbody>（下载完才显示）,<tr></tr>(表格的一行),<td></td>(表格的一个单元格)元素，之后按照定宽块处理，即margin为auto

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>不定宽块状元素水平居中</title>
 6 <style>
 7 table{
 8     margin:0 auto;
 9 }
10 
11 /*下面是任务区代码*/
12 .wrap{
13     background:#ccc;
14     margin:0 auto;
15 }
16 </style>
17 </head>
18 
19 <body>
20 <div>
21 <table>
22   <tbody>
23     <tr><td>
24     <ul>
25         <li>我是第一行文本</li>
26         <li>我是第二行文本</li>
27         <li>我是第三行文本</li>
28     </ul>
29     </td></tr>
30   </tbody>
31 </table>
32 <table><tbody><tr><td>
33 </div>
34 
35 <div class="wrap">
36   设置我所在的div容器水平居中  
37 </div>
38 </td></tr></tbody></table>
39 </body>
40 </html>

二：设置成 inline

在css样式中加入display:inline;使li变为行内元素，之后在<div>标签中设置text-align,使1 2 3居中（li为行的块状元素，ul为块状元素）

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>不定宽块状元素水平居中</title>
 6 <style>
 7 .container{text-align:center;}
 8 .container ul{margin:0;padding:0;display:inline;}
 9 .container li{margin-right:8px;display:inline;}
10 </style>
11 </head>
12 
13 <body>
14 <div class="container">
15     <ul >123
16         <li><a href="#">1</a></li>
17         <li><a href="#">2</a></li>
18         <li><a href="#">3</a></li>
19     </ul>
20 </div>
21 </body>
22 </html>

li是行的块状元素（一般一行只有一个li）,多个li块构成ul箱子。在w3c中ul，li是指无序清单列表，li是列表中的每一项，它们两者的定义是针对结构模块而言的（html,head,div,table）,而text-align是指针对文本而言的。因而ul向上认识div,向下只认识li,它们都是结构标签，ul是不认识文本的哦，但是li里面定义的是文本。可以把这个结构标签通过display:inline文本化（也即行内元素），文本化后文本居中（text-align:center;）就可以起作用了。

3：在父元素中css中加入float:left;left:-50%;position:relative;在子元素中加入position:relative;left:50%;



<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{
   
    float:left;
	position:relative;
	left:50%
}




.container ul{
  
	list-style:none;
	margin:0;
	padding:0;
	
	position:relative;
	left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}





/*下面是代码任务区*/




.wrap-center{
    background:#ccc;
 
    position:relative;
    left:-50%;
    
    
}
.wrap{
    position:relative;
    left:50%;
    float:left;
}
</style>
</head>




<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>




<!--下面是代码任务区-->
<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>
</html>


 




设置垂直居中：


（1）单行文本


设置height和line-height相等即可




 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>垂直居中</title>
 6 <style>
 7 
 8 .wrap {
 9     margin:0;
10     height:100px;
11     line-height:100px;
12     background:#ccc;
13 }
14 </style>
15 </head>
16 
17 <body>
18 
19 <!--下面是代码任务部分-->
20 <div class="wrap">
21     <h2>hi,imooc!</h2>
22 </div>
23 </body>
24 </html>




（2）多行文本


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




 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta  charset="utf-8">
 5 <title>父元素高度确定的多行文本</title>
 6 <style>
 7   .wrap{height:300px;background:#ccc;vertical-align:middle;}
 8  
 9 </style>
10 </head>
11 
12 <body>
13 <table><tbody><tr><td class="wrap"  >
14 <div>
15     <p>看我是否可以居中。</p>
16     <p>看我是否可以居中。</p>
17     <p>看我是否可以居中。</p>
18     <p>看我是否可以居中。</p>
19     <p>看我是否可以居中。</p>
20 </div>
21 </td></tr></tbody></table>
22 
23 <!--下面是代码任务区-->
24 <div>
25     <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
26 </div>
27 </body>
28 </html>




在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。




<!DOCTYPE HTML>
<html>
<head>
<meta  charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.container{
    height:300px;
    background:#ccc;
    
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
</head>

<body>
<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>
<!--下面是代码任务区-->
<div>
    <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</html>




隐性改变display值


 1. position : absolute 


 2. float : left 或 float:right 




 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta  charset="utf-8">
 5 <title>隐性改变display类型</title>
 6 <style>
 7 .container a{
 8     position:absolute;
 9     width:200px;
10     background:#ccc;
11     
12 }
13 
14 </style>
15 </head>
16 
17 <body>
18 <div class="container">
19     <a href="#" title="">进入课程请单击这里</a>
20 </div>
21 </body>
22 </html>




 


---恢复内容结束---






            

            
posted @ 
2016-05-20 21:33 
成功人土 
阅读(105) 
评论(0) 
编辑 
收藏 
举报