博客列表 >3月23日作业(CSS对齐元素)

3月23日作业(CSS对齐元素)

箭里飘香
箭里飘香原创
2018年03月25日 18:55:06619浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素对齐</title>
	<style type="text/css">
		.box1 {
			width: 200px;
			height: 200px;
			background-color: lightblue;
			text-align: center; /*使行内元素在块元素中水平居中*/
			margin: auto; /*浏览器自动计算box1的位置,使其左右自动居中*/
		}
		.box1 span {
			line-height: 200px; /*设置行内元素与父元素等高*/
		}
		.box2 {
			width: 200px;
			height: 200px;
			background-color: skyblue;
			text-align: center; /*使行内元素在块元素中水平居中*/
			/*多个行内元素在块元素中垂直居中 */
			display: table-cell; /*将当前块显示方式改为表格单元格方式*/
			vertical-align: middle; /*设置单元格内元素垂直居中*/
		}
		.box4 {
			width: 400px;
			height: 400px;
			background-color: orange;
			display: table-cell; /*将当前块显示方式改为表格单元格方式*/
			vertical-align: middle; /*设置单元格内元素垂直居中*/
		}
		.box5 {
			width: 200px;
			height: 200px;
			background-color: orange;
			text-align: center; /*使单元格内元素在块元素中水平居中*/
			display: table-cell; /*将当前块显示方式改为表格单元格方式*/
			vertical-align: bottom; /*设置单元格内元素底边居中*/
		}
		.box5 ul {
			padding-left: 0;
		}
		.box5 li {
			list-style: none;
			display: inline;
		}
	</style>
</head>
<body>
	<div class="box4">
		<div class="box1">
			<span>单行文本居中</span>
		</div>
	</div>
	<hr>
	<div class="box2">
		<span>多行文本1</span><br>
		<span>多行文本2</span>
	</div>
	<hr>
	<div class="box5">
		<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>
			<li><a href="">5</a></li>
		</ul>
	</div>
</body>
</html>

运行实例 »

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

20180323.jpg

上一条:3.23作业下一条:2018-3-23作业
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议