zoukankan      html  css  js  c++  java
  • 设置图片居中的方法

    1.设置图片居中(一图居中)

    HTML代码

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

    CSS代码

    .box {
    /*非IE的主流浏览器识别的垂直居中的方法*/
    display: table-cell;
    vertical-align:middle;
    
    /*设置水平居中*/
    text-align:center;
    
    /* 针对IE的Hack */
    *display: block;
    *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
    *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
    
    width:200px;
    height:200px;
    border: 1px solid #eee;
    }
    .box img {
    /*设置图片垂直居中*/
    vertical-align:middle;
    }

    2.设置图片居中(多图居中)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>div水平垂直居中</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            div.container{
                background-color:pink;
                border:2px solid #000;
                width:700px;
                height:500px;
                margin:0 auto;
                margin-top:50px;
            }
            div.wrapper{
                text-align:center;
                margin-top:28px;
            }
            div.wrapper img{
                border:1px solid #ddd;
                width:200px;
                margin:10px;
            }  
        </style>
    </head>
    <body>
        <div class="container">
                <div class="wrapper">
                    <img src="girl3.jpg" alt="a"/>  
                    <img src="girl3.jpg" alt="a"/>
                    <img src="girl3.jpg" alt="a"/>
                    <img src="girl3.jpg" alt="a"/>
                    <img src="girl3.jpg" alt="a"/>
                    <img src="girl3.jpg" alt="a"/>
                </div>
        </div>   
    </body>
    </html>
  • 相关阅读:
    webpack入门
    Javascript隐式转换
    一个最小手势库的实现
    运用JS设置cookie、读取cookie、删除cookie
    不同浏览器下兼容文本两端对齐
    使用CSS3实现一个3D相册
    JavaScript 火的有点过头了,但又能火多久呢?
    强大的css3
    CSS3与页面布局学习总结
    红米手机真机调试问题记录
  • 原文地址:https://www.cnblogs.com/heyiming/p/6871900.html
Copyright © 2011-2022 走看看