zoukankan      html  css  js  c++  java
  • 利用CSS的translate属性或利用CSS实现图片居中的效果

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                margin:0;padding:0;
            }
            .parent {
                float: left;
                width: 100%;
                height: 200px;
                background-color: red;
            }
            .children {
                float:left;
                position:relative;
                top:50%;
                left:50%;
            }
            .children-inline {
                position: relative;
                left: -50%;
                -webkit-transform : translate3d(0, -50%, 0);
                transform : translate3d(0, -50%, 0);
                background-color: black;
                color:white;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="children">
                <div class="children-inline"><img src="http://nec.netease.com/img/s/2.jpg" alt=""/></div>
            </div>
        </div>
    </body>
    </html>
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
    
            *{
                padding:0;
                margin: 0;
            }
            .parent {
                position:relative;
                width:100%;
                height:200px;
                background:red;
            }
            .div-in {
                position:absolute;
                top:50%;
                left:50%;
            }
            .hidden-img {
                visibility:hidden;
            }
            .show-img {
                position:absolute;
                right:50%;
                bottom:50%;
            }
        </style>
    </head>
    <body>
    <div class="parent">
        <div class="div-in">
            <img class="hidden-img" src="http://nec.netease.com/img/s/2.jpg" alt="" />
            <img class="show-img" src="http://nec.netease.com/img/s/1.jpg" alt="" />
        </div>
    </div>
    </body>
    </html>

    效果图:

  • 相关阅读:
    三十岁了是否该改行——我完全晕倒了
    asp.net Context.Handler 页面间传值的几种方法
    信道与信道栈
    正则表达式之字符组
    移动Web界面样式CSS3
    Media Queries语法总结
    WCF全面解析(上下册)
    HTML5移动Web开发指南
    HTML5移动开发即学即用(双色)
    可靠会话最佳实践
  • 原文地址:https://www.cnblogs.com/heyiming/p/6922908.html
Copyright © 2011-2022 走看看