Maison > Article > interface Web > CSS 图片垂直居中的两种方法
方法一:
使用margin方式,使图片在div中上下垂直居中。margin-top值的计算方式是:div的高度/2-图片高度/2。
代码实例如下:
<code class="language-css"> <meta charset="utf-8"> <meta name="author" content="http://www.manongjc.com/"> <title>码农教程</title> <style type="text/css"> div { height:400px; width:400px; border:1px solid red; } div img {margin-top:127px;} </style> <div><img src="/Public/images/logo.gif" alt="码农教程"></div> </code>
方式二:
代码实例如下:
<code> <meta charset="utf-8"> <meta name="author" content="http://www.manongjc.com/"> <title>码农教程</title> <style type="text/css"> div { height:400px; width:400px; border:1px solid red; vertical-align:middle; display:table-cell; } </style> <div><img src="/Public/images/logo.gif" alt="码农教程"></div> </code>
以上代码实现了图片上下垂直居中,不过IE7浏览器并不支持此方式。
实现方式在div中添加了如下代码:
<code class="language-css">vertical-align:middle; display:table-cell; line-height:400px;</code>
大家可以把上面实例代码复制到这里运行一下,查看一下效果。