单行文本或多行文本垂直居中
学思创
227
<style>
.box{width:200px;margin:0 auto;}
.title{
height:56px;line-height:56px;font-size:0;
}
.title>.text{
display: inline-block;vertical-align: middle;
font-size: 18px;
font-weight: bold;
line-height:28px;
}
</style>
<div class="box">
<div class="title">
<span class="text">我和我的祖国</span>
</div>
<div class="title">
<span class="text">我和我的祖国一刻也不能分割 无论我走到哪里都流出一首赞歌 我歌唱每一座高山我歌唱每一条河 袅袅炊烟小小村落路上一道辙 啦...... 你用你那母亲的脉搏和我诉说 我的祖国和我像海和浪花一朵 浪是海的赤子海是那浪的依托 每当大海在微笑我就是笑的旋涡 我分担着海的忧愁分享海的欢乐 啦….. 永远给我碧浪清波心中的歌 啦……. 永远给我碧浪清波心中的歌</span>
</div>
</div>在css类title设置单行文本的高度和垂直居中，然后再子标签span中设置为行内块和垂直居中，单行或者多行文字的行高即可