开发者学堂课程【前端开发CSS基础:CSS 居中总结 】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/361/detail/4274
CSS 居中总结
内容介绍:
一、 居中方式
二、margin:0 auto 代码演示
三、文字居中代码演示
四、table 居中代码演示
五、利用伸缩盒居中代码演示
一、 居中方式
1. margin:0 auto;
2.文字居中:line-height;text-align:center;
3.由 table 演变来的一种居中
4.利用伸缩盒居中
二、 margin:0 auto 代码演示
新建一个 HTML 项目,并命名为 center。
在之前*是做为通配符,在上节课学习到*在IE当中并不代表通配符而是根源族的意思,所以为了匹配、适应各种浏览器就需要用到 html.body 的方式来进行初始化
(1)代码如下:
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
<style>
html.body{
<div class="container”>
<div class=”header”></div>
</div>
</body>
</html>
执行效果如下
此时,能看到两个 div 块。
(2)想让里面的div块来进行居中
代码如下:
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
<style>
html.body{
margin:0;
padding:0;
}
.container{
width:100%;
min-width:996px;
}
执行效果如下
得到紫色的 header 居于了中间
三、 文字居中代码演示
(1)代码如下:
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
<style>
html.body{
margin:0;
padding:0;
}
.container{
width:100%;
min-width:996px;
height:70px;
background -color: aquamarine ;
}
.header{
width:80%;
min-width:996px;
height:70px;
background -color: blueviolet;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container”>
<div class=”header”>
<ul>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<ul>
</div>
</div>
</body>
</html>
执行效果如下
上方的边距是由于 ul 没有被初始化
(2)初始化 ul
代码如下:
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
<style>
html.body.ul{
margin:0;
</head>
<body>
<div class="container”>
<div class=”header”>
<ul>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<ul>
</div>
</div>
</body>
</html>
执行效果如下
此时边距消失。
(3)水平显示
有多种方式:
1. float 让他浮动
2. 设置为 inline-block
3. 设置为盒子,伸缩盒
在本次演示中使用 float
代码如下:
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
<style>
html.body{
margin:0;
padding:0;
}
.container{
width:100%;
min-width:996px;
height:70px;
background -color: aquamarine ;
}
.header{
width:80%;
min-width:996px;
height:70px;
background -color: blueviolet;
margin:0 auto;
}
ul li {
float:left;
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>
执行效果如下
想让水平并局中;
代码如下:
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
}
</style>
</head>
<body>
<div class="container”>
<div class=”header”>
<ul>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
执行效果如下
发现并没有居中,我们需要寻找错误,因为 ul 和 li 标签是包含在盒子里的,
所以 ul li 中的 text-algin:center; 应该放在 header 中。还有是设置了 float ,它会脱离文档流就不能使用,需要把 float 变成 display 即可。
代码如下:
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
<style>
html.body{
margin:0;
padding:0;
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<ul>
</div>
</div>
</body>
</html>
运行效果如下:
(4)垂直显示
代码如下:
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
<style>
hml.body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="container”>
<div class=”header”>
<ul>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<ul>
</div>
</div>
</body>
</html>
运行效果如下:
四、table 居中代码演示
(1)代码如下:
<!DOCTYPE html>
<html long="en">
<head>
}
</style>
</head>
<body>
<div class="t”>
<p>哈哈</p>
</div>
</body>
</html>
运行效果如下:
可以看到 div 上承载了一个哈哈的标签
五、利用伸缩盒居中代码演示
新创建一个 HTML 文件,并命名为 boxcenter;
(1)代码如下:
<lDOCTYPE html>
<html lang=“en">
<head>
<style>
<div class="outer">
<div class="inner">
哈哈
</div>
</div>I
</body>
</html>
效果如下:
(2)粉色的 div居中
代码如下:
<lDOCTYPE html>
<html lang=“en">
</style>
</head>
<body>
<div class="outer">
<div class="inner">
哈哈
</div>
</div>I
</body>
</html>
效果如下:
效果是水平居中
还要在进行垂直居中:
代码如下:
<lDOCTYPE html>
<html lang=“en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="outer">
<div class="inner">
哈哈
</div>
</div>I
</body>
</html>
效果如下:
(3)文字居中
代码如下:
<lDOCTYPE html>
<html lang=“en">
<head>
. inner{
display:-webkit’-box;
width:100px;
height:100px;
background -color: antiquewhite ;
-webkit-box-pack:center;
-webkit-box-align:center;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
哈哈
</div>
</div>I
</body>
</html>
效果如下: