不知道大小的图片在盒子中垂直居中

最新推荐文章于 2022-07-11 23:06:12 发布

77314

最新推荐文章于 2022-07-11 23:06:12 发布

阅读量1k

点赞数

分类专栏：前端学习文章标签：图片垂直居中 css

本文链接：https://blog.csdn.net/qq_14886653/article/details/52628577

版权

前端学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.使用display:table-cell

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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]-->
<div>
<i></i>
    <img src="http://www.baidu.com/img/logo.gif" alt=""/>
</div>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                *display: block;
                *font-size: 175px;
                *font-family: Arial;
                width: 200px;
                height: 200px;
                border: 1px solid #eee;
            }

            .box img {
                vertical-align: middle;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <img src="http://pics.taobao.com/bao/album/promotion/
taoscars_180x95_071112_sr.jpg" />
        </div>
    </body>

</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                background: url(img/footer_logo.png) center no-repeat;
            }
        </style>
    </head>
    <body>
        <div style="width: 400px;height: 400px;"></div>
    </body>
</html>