zoukankan      html  css  js  c++  java
  • 使图片在盒子中水平居中,垂直居中

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>sunshine</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            div{
                width: 100%;
                height: 100%;
                position: fixed;
                margin: 0 auto;
                text-align:center;
                background: url("http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_sky.jpg") no-repeat;
                background-size: 100% 100%;
            }
            span{
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }
            img{
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
            <div>
                <span></span>
                <img src="https://images.cnblogs.com/cnblogs_com/heyiming/947196/t_a.jpg" alt=""/>
            </div>
    </body>
    </html>
  • 相关阅读:
    作业11
    作业10总结
    作业10
    作业9总结
    作业9
    作业8总结
    作业8
    实验7总结
    实验6总结
    史航第12次作业&总结
  • 原文地址:https://www.cnblogs.com/heyiming/p/6397093.html
Copyright © 2011-2022 走看看