7.20-7.24(2)

CSS图片垂直居中的一些方法分享,除了背景图法以外,使用display:inline-block方法实现

<!DOCTYPE html>

<html>

        <head>

                <meta charset="utf-8" />

                <title>display:inline-block方法实现图片垂直居中</title>

                <style type="text/css">

                div {

                        display: table-cell;

                        height: 300px;

                        width: 500px;

                        text-align: center;

                        border: 1px solid #000;

                        vertical-align: middle;

                }

                </style>

                <!--[if IE]>

                <style type="text/css">

                i {

                        display: inline-block;

                        height: 100%;

                        vertical-align: middle;

                }

                img {

                        vertical-align: middle;

                }

                </style>

                <![endif]-->

        </head>

        <body>

                <div>

                        <i></i>

                        <img src="http://www.baidu.com/img/logo.gif" alt="logo" />

                </div>

        </body>

</html>

  以上代码可以简单有效的实现图片垂直方向居中哦。

你可能感兴趣的:(7.20-7.24(2))