实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS对齐方式</title>
<style>
.demo1{
width:400px;
height: 200px;
background-color: #C4F5EF;
text-align: center; /*水平居中*/
}
.demo1 a{
line-height: 200px; /*垂直居中*/
}
.demo2{
width: 400px;
height: 200px;
background-color:#E96ECE;
text-align: center; /*水平居中*/
display:table-cell; /*以表格单元格方式显示*/
vertical-align: middle; /*垂直居中*/
}
.demo31{
width: 200px;
height: 200px;
background-color: #AC6DE6;
display:table-cell; /*以表格单元格方式显示*/
vertical-align: middle; /*垂直居中*/
}
.demo32{
width: 150px;
height: 150px;
background-color:#A4EF8E ;
margin:auto; /*水平居中*/
}
.demo4{
width: 400px;
height: 300px;
background-color: #DEC4F5;
text-align: center; /*水平居中*/
display: table-cell; /*以表格单元格方式显示*/
vertical-align: bottom; /*垂直靠底显示*/
}
.demo4 ul{
margin:0;
padding:0;
}
.demo4 li{
display:inline; /*显示为内联元素*/
}
</style>
</head>
<body>
<div class="demo1">
<a href="">A标签在块元素的对齐方式</a>
</div>
<br>
<div class="demo2">
<p>多行文本在块元素的对齐方式111</p>
<p>多行文本在块元素的对齐方式<br>多行文本在块元素的对齐方式多<br>行文本在块元素的对齐方式</p>
</div>
<br>
<div class="demo31">
<div class="demo32"></div>
</div>
<br>
<div class="demo4">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
