zoukankan      html  css  js  c++  java
  • 有关层的垂直居中

    为什么line-height那种方案不能生效,line-height:值针对行内元素,而且是块元素就不行,不管怎么弄

     <div id="title"   class="panel-heading" style="background-color: #2b2b2b; box-sizing:border-box; color: white;height:35px;line-height:35px;padding: 0 10px;">
    <span>属性编辑框</span>     
    <div  hide="1" id="titletool" style="float:right;height:35px;line-height:35px; cursor:pointer" class="glyphicon glyphicon-resize-full" aria-hidden="true"></div>
    </div>

    生成的效果图如下

    1、之前的解决方案,小学数学 通过父层的高度和子层的高度的差算出子层的margin-top的值

    2、现在的解决方案

    在子层中添加下面的css样式

      position: relative;
         top: 50%;
         transform: translateY(-50%);

    下面我们看我们实现 的效果

    我们代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>有关层的垂直居中</title>
        <style>
     .myclass {
         background-color: brown;
         text-align: center;
         float: left;
         height: 300px;
         line-height: 300px;
         color: white;
         width: 300px;
     }
     .center {
         width: 200px;
         height: 50px;
         padding: 20px;
         text-align: center;
         background: #393;
         color: #fff;
         position: relative;
         top: 50%;
         transform: translateY(-50%);
     }
        </style>
    </head>
    <body style="position: relative">
     <div class="myclass">
       <div  class="center"></div>
     </div>
    
    </body>
    </html>

    有关的源代码下载

  • 相关阅读:
    DataSet调用Dispose必须吗
    Python基础
    windows下pip升级到8.1.1 及安装Selenium
    python文件编码说明 coding
    Response.End() VS Context.ApplicationInstance.CompleteRequest()
    Python练习正则
    Python2.7爬虫练习爬百度百科python词条
    未知错误:1000正在终止线程
    debug pin用
    读取文件
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/6435326.html
Copyright © 2011-2022 走看看