简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS中常用的元素对齐方法——2018年3月23日课程 27日17时0分修改
Blogger Information
Blog 28
fans 0
comment 0
visits 14105
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS中常用的元素对齐方法——2018年3月23日课程 27日17时0分修改
泰礴松的博客
Original
643 people have browsed it

3.23主要学习了四种元素对齐方法，分别是1.子元素是行内元素的对齐方法；2.子元素是多行行内元素的对齐方法；3.子元素是块元素的对齐方法；4.子元素是不定宽的块元素的对齐方法。四种方法涵盖了网页设计所需的基本对齐方式，对将来网页设计时有着重要的理论作用。

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>各种对齐方式</title>
	<style type="text/css">

		.hang {
			background-color: lightblue;
			width: 200px;
			height: 200px;
			text-align: center;
		}
		.dhang {
			color: red;
			line-height: 200px;
			box-shadow: 3px 3px 3px #666;
		}
		.duo {
			background-color: yellow;
			width: 200px;
			height: 200px;
			text-align: center;
			display: table-cell;
			vertical-align: middle;
		}
		.kuai {

			background-color: blue;
			width: 200px;
			height: 200px;
			display: table-cell;
			vertical-align: middle;
		}
		.kuai .kkuai {
			background-color: red;
			width: 100px;
			height: 100px;
			margin: auto;
			text-align: center;
			
			
		}
		
		.buding {
			width: 200px;
			height: 200px;
			text-align: center;
			background-color: red;
			display: table-cell;
			vertical-align: bottom;

		}
		.buding ul {
			margin: 0;
			padding: 0;
		}
		.buding li {
			list-style: none;
			display: inline;
		}

	</style>
</head>
<body>
	<!-- 子元素是行内元素的对齐方式 -->
	<div class="hang">
		<a href="" class="dhang">我是单行内元素</a>
	</div>
	<!-- 子元素是多行的行内元素 -->
	<div class="duo">
		<a href="" class="dduo">我是多行第一行</a><br>
		<span class="dduo">我是多行第二行</span>
	</div>
	<!-- 子元素是块元素 -->
	<br>
	<div class="kuai">
		<div class="kkuai">
			
		</div>
	</div>
	<!-- 子元素是不定宽的块元素 -->
	<div class="buding">
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">2</a></li>
			<li><a href="">3</a></li>
		</ul>
	</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手写版：

2071342317.jpg753793045.jpg2091808299.jpg

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！