实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对齐的练习</title>
<style type="text/css">
*{margin: 0; padding: 0; list-style: none; text-decoration: none;}
.box{
width: 600px;
height:320px;
border:1px solid #eee;
border-radius: 20px;
box-shadow:0 0 10px rgba(0,0,0,0.2);
background-image: url(..images/jx.png);
background-repeat: no-repeat;
background-size: auto 100%;
background-position: top center;
margin: 50px auto;
}
.box .left{
float:left;
width: 239px;
height: 280px;
border-right: 1px solid #aaa;
}
.box .left .title{
/*父级块元素，子级内联元素，父元素设置text-align:center水平居中，line-height与高度等高垂直居中*/
font-size: 24px;
height: 50px;
line-height: 50px;
text-align: center;
border-bottom: 1px solid #aaa;
font-weight: bold;
}
.box .left .content{
/*父级块元素，子级多行内联元素，父元素设置text-align:center水平居中，父元素设置:display:table-cell;vertical-align:middle垂直居中*/
width:240px;
height: 227px;
line-height: 48px;
color:green;
display: table-cell; /*设置显示方式为表格单元格*/
vertical-align: middle;
text-align: center;
border-bottom: 1px solid #aaa;
}
.right{
float: right;
}
.right .box2{
/*父级块元素，子级也是块元素，子元素设置margin: auto;水平居中，父元素设置:display:table-cell;vertical-align:middle垂直居中*/
width: 360px;
height: 278px;
border-bottom: 1px solid #aaa;
display: table-cell;
vertical-align: middle;
}
.right .box2 img{
display: block;
width: 300px;
height: 200px;
margin:auto;
}
.box .page{
/*子元素是不定宽的块元素，子元素转行内元素，父元素设置text-align:center水平居中，父级设置vertical-align:bottom底边居中*/
width: 100%;
height: 40px;
display: table-cell;
vertical-align: bottom;
text-align: center;
}
.box .page li{
display: inline;
border:1px solid #bbb;
padding: 2px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<div class="title"><span>诗一首</span></div>
<div class="content">
<span>离离原上草</span><br>
<span>一岁一枯荣</span><br>
<span>野火烧不尽</span><br>
<span>春风吹又生</span>
</div>
</div>
<div class="right">
<div class="box2">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521998580610&di=e036cef87eab2658fc1d90183c556d83&imgtype=0&src=http%3A%2F%2Fs4.sinaimg.cn%2Fbmiddle%2F4f1cdb9b4438208d3cb53"" alt="这是一张转换成block的图，尺寸为300*200">
</div>
</div>
<div class="page">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
