简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 3.23作业：常用的四种css对齐方式
Blogger Information
Blog 23
fans 1
comment 1
visits 22891
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
3.23作业：常用的四种css对齐方式
潮涌学习php的博客
Original
744 people have browsed it

这一节学习了4种通过css控制对齐的方式

1.子元素是行内元素，如：a ,span

a：水平居中：在父元素上面设置：text-align:center;

b：垂直居中，在行内元素（子元素）设置行高与父元素等高：lineheight


2.子元素是多行的内联/行内文本

a：水平居中：在父元素上面设置：text-align:center;

b：垂直居中：父元素设置：display:table-cell; vertical-align:middle;


3.子元素是块元素的时候

a：水平居中：子元素上设置左右自动：margin:auto;

b：垂直居中：父元素伤设置：display:table-cell; vertical-align:middle;


4.子元素是不定宽的块元素，最常见的就是分页导航

a：水平居中：在父元素中设置：text-align:center;

b：垂直居中：给分页的ul，加行高line-height, 等于它的父元素的行高

c：底边居中：更为常用，与多行文本处理的方式是一样的：display:table-cell; vertical-align:bottom;

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3.23作业：常用的四种对齐方式</title>
	<style type="text/css">
	/*1.子元素是行内元素，如：a ,span*/
		.dahai{
			width:100px;
			height:100px;
			background-color:lightblue;
			text-align:center; /*水平居中*/
		}
		.dahai a {
			line-height:100px; /*垂直居中*/
		}
		/*2.子元素是多行的内联/行内文本*/
		.box2 {
			width:300px;
			height:300px;
			background-color:skyblue;
			text-align:center; /*水平居中*/
			/*垂直居中*/
			display:table-cell; 
			vertical-align:middle;
		}
		/*3.子元素是块元素的时候*/
		.box3{
			width:200px;
			height:200px;
			background-color:yellow;
			/*垂直居中*/
			display:table-cell;
			vertical-align:middle;
		}
		.box3 .list{
			width:100px;
			height:100px;
			background-color:blue;
			margin:auto; /*水平居中*/
		}
		/*4.子元素是不定宽的块元素*/
		.box4 {
			width:400px;
			height:200px;
			background-color:skyblue;
			text-align:center; /*水平居中*/
			/*底边居中*/
			display:table-cell;
			vertical-align:bottom;
		}
		.box4 ul{
			padding:0;
			/*垂直居中*/
			line-height:200px;
		}
		.box4 ul li{
			list-style:none;
			display:inline;
			padding-left:10px;
		}
	</style>
</head>
<body>
	<h4>父元素一定是一个块元素，根据子元素的不同，有以下几种对齐方式</h4>
	<h5>1.子元素是行内元素，如：a ,span</h5>
	<div class="dahai">
		<a href="">大海潮涌</a>
	</div>
	<hr>
	<h5>2.子元素是多行的内联/行内文本</h5>
	<div class="box2">
		<a href=""><img src="../images/11.jpg" width="150px"></a>
		<p>文章标题</p>
	</div>
	<hr>
	<h5>3.子元素是块元素的时候</h5>
	<div class="box3">
		<div class="list"></div>
	</div>
	<hr>
	<h5>4.子元素是不定宽的块元素</h5>
		<div class="box4">
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">2</a></li>
			<li><a href="">3</a></li>
			<li><a href="">4</a></li>
		</ul>
	</div>
</body>
</html>

运行实例 »

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

3.23-1.jpg

3.23-2.jpg

3.23-3.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！