3-6练习实现的效果不一样？把text-align去掉效果也不一样，为什么？

<!DOCTYPE html>

<html>

<head>

<title>vertical-align</title>

*{padding:0px;margin: 0px;}

.warp1{

height:80px;

width: 100%;

background-color: #14191e;

/*在此补充代码*/

display:table;

text-align:center;

}

.warp1 h1{ color:#fff;

display:table-cell;

vertical-align:middle;

font-size:24px;

/*在此补充代码*/ }

.warp2{

height:400px;

width: 100%;

border:1px #14191e solid;

/*在此补充代码*/

display:table;

}

.content{display:table-cell;

text-align:center;

vertical-align:middle;

line-height:1.5em;

font-size:14px;

/*在此补充代码*/

}

.content p{ width:500px;

font-family: "微软雅黑";

margin:0 auto;

/*在此补充代码*/}

</style>

</head>

<body>

<h1>欢迎来到慕课网</h1>

</div>

<p>慕课网，只学有用的！</p>

<p>慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p>

</div>

</body>

</html>

慕村1704847 2017-09-23

源自：CSS文本样式 3-12 编程练习

收起

1回答

卡布琦诺 2017-09-24 09:41:42

去掉text-align效果是一样的哦

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>vertical-align</title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			
			.warp1 {
				height: 80px;
				width: 100%;
				background-color: #14191e;
				/*在此补充代码*/
				display: table;
				text-align: center;
			}
			
			.warp1 h1 {
				color: #fff;
				display: table-cell;
				vertical-align: middle;
				font-size: 24px;
				/*在此补充代码*/
			}
			
			.warp2 {
				height: 400px;
				width: 100%;
				border: 1px #14191e solid;
				/*在此补充代码*/
				display: table;
			}
			
			.content {
				display: table-cell;
				/*text-align: center;*/
				vertical-align: middle;
				line-height: 1.5em;
				font-size: 14px;
				/*在此补充代码*/
			}
			
			.content p {
				width: 500px;
				font-family: "微软雅黑";
				margin: 0 auto;
				/*在此补充代码*/
			}
		</style>
	</head>

	<body>
		<div class="warp1">
			<h1>欢迎来到慕课网</h1>
		</div>
		<div class="warp2">
			<div class="content">
				<p>慕课网，只学有用的！</p>
				<p>慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p>
			</div>
		</div>

		</div>
	</body>

</html>