最代码广告位
最代码官方的gravatar头像
最代码官方2015-11-18 00:11:53

html网页中设置图片img标签垂直居中的代码

今天在实现wap版本的最代码发现logo图片通过css语法:vertical-align:middle;实现垂直居中,搜索了半天总结分享下靠谱的答案:

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
background-color: #29A7E1;
}
#box span{
display:table-cell;
vertical-align:middle;
}
</style>

1.使用table

<div id="box">
    <table width="100%" height="100%">
        <tr>
            <td align="center">
                <img src="http://static.zuidaima.com/resource/img/logo.png" />
            </td>
        </tr>
    </table>
</div>

2.使用display:table和display:talbe-cell

<div id="box">
  <span><img src="http://static.zuidaima.com/resource/img/logo.png" alt="" /></span>
</div>

效果如下图

html网页中设置图片img标签垂直居中的代码


打赏

文件名:html网页中设置图片img标签垂直居中的代码.rar,文件大小:0.635K下载
  • /
    • /html网页中设置图片img标签垂直居中的代码.html
最代码最近下载分享源代码列表最近下载
wxsuperwx LV172017年12月3日
太阳星星
雪初寒 LV22017年6月25日
星星星星
qwerasdQQ LV132017年5月31日
月亮月亮月亮星星
zt1992810 LV12017年3月2日
星星
18523528882 LV12017年2月28日
星星
dagf113225 LV682016年10月24日
皇冠月亮
xiaojiao LV12016年6月17日
星星
wyb LV82015年12月3日
月亮月亮
最代码最近浏览分享源代码列表最近浏览
lichengai LV66月15日
月亮星星星星
东风风神发顺丰 LV22月22日
星星星星
139465 LV82019年12月12日
月亮月亮
kangdi LV102019年10月18日
月亮月亮星星星星
7152634282019年8月20日
暂无贡献等级
keep on coding LV12019年7月22日
星星
代码男神2019 LV102019年7月9日
月亮月亮星星星星
Mango77 LV22019年7月9日
星星星星
kkkkllllll LV12019年6月28日
星星
muimuimui LV72019年6月27日
月亮星星星星星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友