CSS基础学习 21.CSS居中总结
注意：*在IE中并不代表通配符的意思，是代表根元素的意思，所以为了匹配适应各种浏览器，进行页面初始化
<style>
*{
margin:0;
padding:0;
}
</style>
用以下形式代替
<style>
html,body{
margin:0;
padding:0;
}
</style>
1.盒子居中 margin:0 auto;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
margin: 0;
padding: 0;
}
.container{
width: 100%;
min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
height: 70px;
background-color: aquamarine;
}
.header{
width: 80%;
height: 70px;
background-color: blueviolet;
min-width: 996px;
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
</div>
</body>
</html>
设置margin:0 auto;让盒子居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body,ul{
margin: 0;
padding: 0;
}
.container{
width: 100%;
min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
height: 70px;
background-color: aquamarine;
}
.header{
width: 80%;
height: 70px;
background-color: blueviolet;
min-width: 996px;
margin:0 auto; /*上下为0，左右为自适应*/
}
</style>
</head>
<body>
<div class="container">
<div class="header">
</div>
</div>
</body>
</html>
2.文字居中 line-height;text-align:center;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body,ul{
margin: 0;
padding: 0;
}
.container{
width: 100%;
min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
height: 70px;
background-color: aquamarine;
}
.header{
width: 80%;
height: 70px;
background-color: blueviolet;
min-width: 996px;
margin:0 auto; /*上下为0，左右为自适应*/
}
ul li{
display: inline-block;/*内联块级元素和其他元素都在一行上*/
list-style-type: none;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<ul>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
</div>
</div>
</body>
</html>
line-height;text-align:center;设置文字居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body,ul{
margin: 0;
padding: 0;
}
.container{
width: 100%;
min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
height: 70px;
background-color: aquamarine;
}
.header{
width: 80%;
height: 70px;
background-color: blueviolet;
min-width: 996px;
margin:0 auto; /*上下为0，左右为自适应*/
text-align: center;/*水平居中*/ }
ul{
line-height: 70px;/*垂直居中*/
}
ul li{
/*float: left;*//*会脱离文档流，这时不能用text-align: center;设置水平居中*/
display: inline-block;/*内联块级元素和其他元素都在一行上*/
list-style-type: none;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<ul>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
</div>
</div>
</body>
</html>
3.由table演变来的一种居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.t{
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="t">
<p>哈哈</p>
</div>
</body>
</html>
用table设置水平垂直居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.t{
display: table;/*外层div变为table*/
width: 200px;
height: 200px;
background-color: aquamarine;
}
p{
display: table-cell;/*设置为单元格*/
text-align: center;/*水平居中*/
vertical-align: middle;/*垂直居中*/
}
</style>
</head>
<body>
<div class="t">
<p>哈哈</p>
</div>
</body>
</html>
4.利用伸缩盒居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.outer{
width: 200px;
height: 200px;
background-color: aquamarine;
}
.inner{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
哈哈
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.outer{
display: -webkit-box;/*设置为盒子*/
width: 200px;
height: 200px;
background-color: aquamarine;
-webkit-box-pack:center;/*水平居中*/
-webkit-box-align:center;/*垂直居中*/
}
.inner{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
哈哈
</div>
</div>
</body>
</html>
接下来设置文字居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.outer{
display: -webkit-box;/*设置为盒子*/
width: 200px;
height: 200px;
background-color: aquamarine;
-webkit-box-pack:center;/*水平居中*/
-webkit-box-align:center;/*垂直居中*/
}
.inner{
display: -webkit-box;/*设置为盒子*/
-webkit-box-pack:center;/*水平居中*/
-webkit-box-align:center;/*垂直居中*/
width: 100px;
height: 100px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
哈哈
</div>
</div>
</body>
</html>
CSS基础学习 21.CSS居中总结的更多相关文章
- CSS基础学习 20.CSS媒体查询
- CSS基础学习 19.CSS hack
- CSS基础学习 18.CSS多列
四种常见的浏览器内核:
- CSS基础学习 17.CSS动画
- CSS基础学习 16.CSS过渡
- CSS基础学习-15-1.CSS 浏览器内核
- CSS基础学习-14 CSS visibility与overflow属性
- CSS基础学习-13.CSS 浮动
如果前一个元素设置浮动属性,则之后的元素也会继承float属性,我觉得这里说是继承不太对,可以理解为会影响到之后的元素,所以在设置浮动元素之后的元素要想不被影响就需要清除浮动.元素设置左浮动,则清除左 ...
- CSS基础学习-12.CSS position
绝对定位 position:absolute,元素脱离文档流,然后使用left.right.top.bottom属性相对于其最接近的一个具有定位属性的祖先元素进行绝对定位.如果不存在这样的祖先元素,则 ...
随机推荐
- Java学习笔记-流程控制
在Java中,最常见的就是顺序结构,另外,还有其他的一些的结构,选择,循环等,这些程序结构的加入,使得程序代码更有选择性 判断结构 if语句 三种格式: if(条件表达式) { 执行语句; } if( ...
- Eclipse配置编写HTML/JS/CSS/JSP页面的自动提示
我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...
- JavaSE基础（七）--Java流程控制语句之switch case 语句
Java switch case 语句 switch case 语句判断一个变量与一系列值中某个值是否相等,每个值称为一个分支. 语法 switch case 语句语法格式如下: switch(exp ...
- upw,c#,代码实现关闭，重启应用
微软为uwp直接提供了这些API,可以很容易的直接进行调用 关闭 using Windows.ApplicationModel.Core; CoreApplication.Exit(); or usi ...
- private关键字 this关键字
基本类型的布尔值boolean定义get方法,名称应该为isMale 当方法的局部变量和类的成员变量重名的时候,根据就近原则,有限使用局部变量, 如果需要访问成员变量 则使用this.name 构造 ...
- PTA(Advanced Level)1050.String Subtraction
Given two strings S1 and S2, S=S1−S2 is defined to be the remaining string after taking all the char ...
- [DEBUG] spring boot在eclipse中用maven打包成jar访问templates报500错误
更新:打war包的话只要把html文件放在resources/templates下即可,根本不需要放外面. 配置application.yml和templates放外面这种做法,打war包确实不行. ...
- Dijstra_优先队列_前向星
Dijstra算法求最短路径 具体实现方式 设置源点,将源点从原集u{}中取出并放入新建集s{} 找出至源点最近的点q从原集取出放入新集s{} 由q点出发,更新所有由q点能到达的仍处于原集的点到源点的 ...
- P2279 消防局的设立 （树形DP or 贪心）
(点击此处查看原题) 树形DP写法 看到这个题的要求,很容易相到这是一个树形DP的问题,但是dp数组应该如何设计并转移才是关键 dp[i][0]代表当前结点可以向上覆盖2层,自身一定被覆盖dp[i][ ...
- 基础python规范
一.注释 合理的代码注释应该占源代码的 1/3 左右,Python 语言允许在任何地方插入空字符或注释,但不能插入到标识符和字符串中间. 在 Python 中,通常包括 3 种类型的注 ...