zoukankan      html  css  js  c++  java
  • pc端常见布局---垂直居中布局 单元素不定高

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>常见元素布局</title>
            <style type="text/css">
                /* 一、垂直居中布局 */
                /* 1.单个元素垂直居中 高度不固定*/
                .content {
                    position: relative;
                    height: 100px;
                    background: #008000;/* height和background测试更好的观看效果 可忽略*/
                }
    
                .box {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    background: #ff9933;
                    color: #fff;/* background和color测试更好的观看效果 */
                }
            </style>
        </head>
        <body>
            <div class="content">
                <div class="box">
                    高度不固定
                </div>
            </div>
        </body>
    </html>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>常见元素布局</title>
            <style type="text/css">
                /* 一、垂直居中布局 */
                /* 2.单个元素垂直居中 高度不固定 缺点:由父类控制是否居中*/
                .content {
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>
        <body>
            <div class="content">
                <div class="box">
                    高度不固定
                </div>
            </div>
        </body>
    </html>

    效果:

  • 相关阅读:
    10.cocos2dx C++为Sprite添加触摸事件监听器
    9.多彩的幕布layer
    8.ZOrder
    7.cocos精灵创建和绘制
    6.cocos2d设置定时器
    5.cocos2d锚点
    4.cocos场景和层的调用
    文件导入导出
    两个整数相乘是否超限
    倒置字符串函数reverse
  • 原文地址:https://www.cnblogs.com/lhl66/p/10374661.html
Copyright © 2011-2022 走看看