不定高度外框,多行文字居中及css伪类测试

1)多行文字居中是通过将外框display设为table,内框display设为table-cell,vertical-align设为middle实现,该效果相对其他方法效果不错
2)同时测试了:after,:first-letter,:first-line等伪类


不定高度外框,多行文字居中及css伪类测试_第1张图片


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> 不定高度外框,多行文字居中及css伪类测试 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  <div class='text-wrap'>
    <div class='text-wrap-td'>
  	不定高度外框,多行文字居中及css伪类测试
  	</div>
  </div>
</body>
<style>
	.text-wrap{display:table;width:300px;height:200px;margin: 0 auto;border:1px #000 solid;}
	.text-wrap-td{display:table-cell;vertical-align: middle;text-align: center;margin: 10px 0;}
	.text-wrap-td:after{content:'>';}
	.text-wrap-td:first-letter{color:#f00;}
	.text-wrap-td:first-line{background: #aaa;}
	.text-wrap-td:hover{cursor:pointer;}
</style>
</html>

你可能感兴趣的:(css)