1. 技术文章
  2. 图片垂直居中

图片垂直居中

由 和自甴很熟 提交于 2019-12-20 12:28:33

方法一：

 

Code

 

 

方法二：

 

Code

 

方法三：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
<!-- 
* {margin:0;padding:0}
div {
    width:500px;
    height:500px;
    line-height:500px;
    border:1px solid #ccc;
    overflow:hidden;
    position:relative;
    text-align:center;
    }
div p {
    position:static;
    +position:absolute;
    top:50%;
    vertical-align:middle
    }
img {
    position:static;
    +position:relative;
    top:-50%;left:-50%;
    width:276px;
    height:110px;
    vertical-align:middle
    }
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>

 

方法四：

 

Code

 

方法五：

 

Code

 

方法六：

 

Code

 

 

由于各浏览器的差异，图片垂直居中 能尽量用表格完成

<td height="48" width="48" valign="middle" align="center">

标签
垂直居中
position
html居中
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!