zoukankan      html  css  js  c++  java
  • 网页水平固定居中某一个块,兼容移动端

    <div class="company-logo">
        <div class="logo-line"></div>
        <div class="logo-box">
             <img class="logo" src="../img/doctor/LOGO.png" />
             <div class="logo-info">
                 医首信息
             </div>
       </div>
    </div>
    .company-logo{
        margin: 80px auto;
        position: relative;   /*父级元素相对定位*/
    }
    .logo-box{
        position: absolute;    /*logo 绝对定位*/
        top: -45px;               
        left: 50%;                  /*这个很重要,左50%*/
        transform: translateX(-50%);     /*X方向 平移 -50%,必须与left:50%结合使用,否则不会水平居中*/
    }
    .logo-line{
        border-top: 1px solid #999;
    }
    
    .logo{
        width: 50px;
        background: #fff;
        padding: 15px 15px 2px 15px;
    }
    .logo-info{
        text-align: center;
        font-size: 12px;
    }
  • 相关阅读:
    推荐Windows下SVN服务器端和客户端工具软件
    QT的一些小知识
    Qt
    Qt
    ADB
    HTTP
    Python
    项目附
    项目
    架构
  • 原文地址:https://www.cnblogs.com/baiyygynui/p/6376992.html
Copyright © 2011-2022 走看看