今天是在PHP中文网学习的第7天，开始学会了css居中处理，开始有点乐趣。
代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 宋慧乔个人资料</title>
<style type="text/css">
body{
text-align: center;
background-color: lightskyblue;
}
.box1{
width: 200px;
height: 200px;
background-color: pink;
text-align: center;
/*以下二个声明可以使块级子元素垂直居中*/
display: table-cell; /*设置显示方式为表格单元格*/
vertical-align: middle; /*设置该单元格内的元素垂直居中*/
padding-top: 30px; }
.box1.img{
width: 100px;
height: 100px;
margin: auto; /*水平居中*/
}
.item1{
text-align: left;
/*以下二个声明可以使块级子元素垂直居中*/
display: table-cell; /*设置显示方式为表格单元格*/
vertical-align: middle; /*设置该单元格内的元素垂直居中*/
list-style-type: decimal;
padding-left: 100px;
padding-top: 10px;
}
.item li {
font-family: 微软雅黑；
font-size：1.02em;
line-height: 30px;
}
.item2{
text-align: left;
padding-top: 30px;
color: red;
}
.item3{
height: 100px;
text-align: left;
padding-top: 30px;
}
</head>
</style>
<body>
<div class="box1">
<div><img src="images/q.png"><h2>宋慧乔</h2></div>
</div>
<ul class="item1">
<li>1996年，宋慧乔参加SMART模特大赛并获得了首奖，进入演艺圈。</li>
<li>1997年，宋慧乔拍摄了一些电视台的喜剧及短片，如长篇喜剧《顺风妇产科》</li>
<li>2000年，宋慧乔出演了《蓝色生死恋》[3]，获得了KBS的最上镜头奖和人气奖。</li>
<li>2001年，宋慧乔出演了《情定大饭店》[4]及《守护天使》两部电视剧。</li>
<li>2003年，与李秉宪联袂主演的电视剧《All in》。</li>
<li>2004年，宋慧乔改变了以往安静乖巧的形象，出演《浪漫满屋》中活泼开朗的女主角韩智恩</li>
<li>2005年，宋慧乔首次尝试了电影，和车太贤搭档出演清新爱情电影《我和我的女友》。</li>
<li>2007年，拍摄时间一年的电影《黄真伊》与观众见面。</li>
<li>2015年4月16日，主演的电影《我是女王》上映.</li>
</ul>
<hr>
<div class="item2">
<h1>宋慧乔主要作品</h1></div>
<br> <hr>
<div class="item3">
<img src="images/dianshi.png" width="800px" height="400px">
<img src="images/dianying.png" width="800px" height="400px">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码图片
