zoukankan      html  css  js  c++  java
  • 内容垂直居中

    方法一: 内边距(padding)

    方法二: 行高 (line-height)

    方法三: 定位 (position, transform)

       html: 

    <div class="box">
        <div class="content">
            <p>测试垂直居中效果测试垂直居中效果</p>
            <p>测试垂直居中效果测试垂直居中效果</p>
        </div>
    </div>

      css: 

        .box {
                margin:0 auto;
                 300px;
                height: 300px;
                background: #000;
                position: relative;
            }
            .box .content {
                color: red;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
            }

    效果图:

      

    方法四: 模拟表格(display: table;)

      css: 

            .box {
                display:table;
                300px;
                height:300px;
                background:#000;
                margin:0 auto;
                color:red;
            }
            .box .content {
                display:table-cell; 
                vertical-align:middle;
                text-align: center;
            }                

    效果图: 

        

    方法五: 盒子(box)

      css: 

           .box {
                 300px;
                height: 200px;
                padding: 10px;
                border: 1px solid #ccc;
                background:#000;
                color:#fff;
                margin: 20px auto;
    
    
                display: -webkit-box;
                -webkit-box-orient: horizontal;
                -webkit-box-pack: center;  //start center end -->左 中 右
                -webkit-box-align: center;  //start center end -->上 中 下
    
                display: -moz-box;
                -moz-box-orient: horizontal;
                -moz-box-pack: center;
                -moz-box-align: center;
    
                display: -o-box;
                -o-box-orient: horizontal;
                -o-box-pack: center;
                -o-box-align: center;
    
                display: -ms-box;
                -ms-box-orient: horizontal;
                -ms-box-pack: center;
                -ms-box-align: center;
    
                display: box;
                box-orient: horizontal;
                box-pack: center;
                box-align: center;
            }

    效果图: 

  • 相关阅读:
    atitit.为什么java体系开发效率这样低的原因and解决
    使用11g DNFS建立基于DNFS的tablespace
    MalformedObjectNameException: Invalid character '' in value part of property
    Spring MVC DispatcherServlet绑定多种URL
    chrome与pdf的事情
    JSP获取绝对物理地址
    spring mvc 与 jasper Report集成
    HttpServletRequest和ServletRequest的区别
    aJax请求结果中包含form的问题
    javascript与java编码互转
  • 原文地址:https://www.cnblogs.com/wangyihong/p/7267816.html
Copyright © 2011-2022 走看看