实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的四种对齐技巧</title>
<style type="text/css">
/*清除网页元素默认间距）*/
body {
margin:0;
padding:0;
}
/*块元素对齐样式*/
.red {
width:300px;
height:300px;
background-color:pink;
text-align:center;
display:table-cell; /*转换为单元格*/
vertical-align:middle; /*单元格内垂直居中对齐*/
}
.mid1 {
width:200px;
height:200px;
background-color:coral;
margin:auto; /*设置外间距随机达到水平居中效果*/
line-height: 200px; /*单行文本用行高垂直居中*/
}
/*行内元素对齐样式*/
.blue {
width:300px;
height:300px;
background-color:skyblue;
text-align:center; /*设置元素的水平居中*/
}
.mid2 {
line-height:300px; /*设置行高等于父元素行高达到垂直居中效果*/
}
/*多行内联元素对齐样式*/
.yellow {
width:300px;
height:300px;
background-color:yellow;
text-align:center;
display:table-cell;
vertical-align:middle;
}
/*不定宽对齐样式*/
.green {
width:300px;
height:300px;
background-color:lightgreen;
text-align:center; /*文本水平居中*/
display:table-cell;
vertical-align:bottom; /*底部居中*/
}
ul {
padding-left:0; /*去除ul左边默认40px的padding*/
/*line-height:300px;*/
}
li {
display:inline; /*变为行内元素（不换行）*/
}
</style>
</head>
<body>
<h3>1.子元素为块元素的水平、垂直居中对齐</h3>
<div class="red">
<div class="mid1">XXXX管理系统欢迎你！</div>
<!-- <p>XXXX管理系统欢迎你！</p> -->
</div>
<hr>
<h3>2.子元素为行内元素的水平、垂直居中对齐</h3>
<div class="blue">
<span class="mid2">行内元素水平居中对齐
<!-- <br> -->
<a href="http://www.php.cn/blog/lilove432.html">
作业微博
</a>
</span>
</div>
<hr>
<h3>3.子元素为多行内联元素的水平、垂直居中对齐</h3>
<div class="yellow">
<em>我的微博作业</em><br>
<em><a href="http://www.php.cn/blog/lilove432.html">blog</a></em><br>
<em>手写作业也在里面</em>
</div>
<hr>
<h3>4.子元素不定宽的水平、垂直居中对齐</h3>
<div class="green">
<ul>
<li>条目</li>
<li>111111</li>
<li>22</li>
<li>3333</li>
<li>44</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业手写：
