图标与文字垂直居中显示

1、主要利用在父元素上设置display:-webkit-box;

    和在子元素上设置相同的line-height；

　　html代码：　

　　<div id="box">
　　　　<div class="icon_download"></div>       //图标
　　　　<div class="wrap">蜗居中了</div>
　　</div>

　　css样式　

　　#box{
　　　　display:box;
　　　　display:-webkit-box;
　　}　　

　　#box div{
　　　　line-height:80px;
　　}
　　#box .icon_download{
　　　　font-size:12px;
　　}
　　#box .wrap{
　　　　font-size: 24px;
　　}

2:用一个div 将需要垂直居中的元素包裹起来，将子元素全部设置：display:inline-block和vartical-align:middle;

  注意：全部的子元素都要用标签包裹，文字也要用标签包裹

  HTML代码

　　<div id="box1">
　　　　<div class="icon_time"></div>
　　　　<div class="wrap">蜗居中了</div>
　　</div>

 css样式

　　#box1 *{
　　　　display:inline-block;
　　　　vertical-align: middle;
　　}

 

转载于:https://www.cnblogs.com/zhxling/p/5691927.html