CSS 居中总结 | 学习笔记

简介: 快速学习 CSS 居中总结

开发者学堂课程【前端开发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>

执行效果如下

image.png

想让水平并局中;

代码如下:

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

执行效果如下

image.png

发现并没有居中,我们需要寻找错误,因为 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>

运行效果如下:

image.png

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

运行效果如下:

image.png

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

效果如下:

image.png

(2)粉色的 div居中

代码如下:

<lDOCTYPE html>

<html lang=“en">

</style>

</head>

<body>

<div class="outer">

<div class="inner">

哈哈

</div>

</div>I

</body>

</html>

效果如下:

效果是水平居中

image.png

还要在进行垂直居中:

代码如下:

<lDOCTYPE html>

<html lang=“en">

<head>

<meta charset="UTF-8">

</head>

<body>

<div class="outer">

<div class="inner">

哈哈

</div>

</div>I

</body>

</html>

效果如下:

image.png 

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

效果如下:

image.png

 

相关文章
|
前端开发 开发者
HTML+CSS+JS 学习笔记(二)———CSS
HTML+CSS+JS 学习笔记(二)———CSS
184 0
|
2月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
6月前
|
人工智能 前端开发
CSS学习笔记2024最新
CSS学习笔记2024最新
39 1
|
前端开发
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置
57 0
|
6月前
|
前端开发 JavaScript 容器
CSS学习笔记(一) 盒子模型
CSS学习笔记(一) 盒子模型
|
6月前
|
缓存 前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记->处理CSS
《Webpack5 核心原理与应用实践》学习笔记->处理CSS
54 0
|
前端开发
CSS学习笔记
CSS学习笔记
49 0
CSS学习笔记
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
|
前端开发 开发者