• 元素居中的几种实现方式


    绝对定位方式:
    div{
    100px;
    height: 100px;
    background: green;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    }

    注释:DIV绝对定位,距顶和距左设置为父元素的50%,再把自身宽高的一半加margin负值;


    如何居中一个设置了浮动的元素

    <style>
    .box{
    300px;
    height: 300px;
    border:1px solid black;
    /*垂直居中*/
    display: table-cell;
    vertical-align: middle;
    }
    .content{
    height: 100px;
    100px;
    border:1px solid red;
    /*水平居中,但设置浮动后失效
    margin: 0 auto;*/
    float: left;
    margin-left: 50%;
    position: relative;
    left: -50px;
    }
    </style>
    </head>
    <body>
    <div class="box">
    <div class="content"></div>
    </div>
    </body>


    父级display:table和子级display:table-cell让元素居中

     一说到垂直居中就会想到,单行文字垂直居中line-height等于height;块级元素垂直居中,position定位或者flex布局。但这里我介绍display:table和table-cell是如何让多行文字垂直居中的。虽然感觉用的不多,但是在某些时候还是挺管用的

    <style>

    .parent{
    300px;
    height: 300px;
    display: table;
    text-align: center;
    }
    .child{
    height: 200px;
    background: yellow;
    display: table-cell;
    vertical-align: middle;
    }

    </style>

    <body>

    <div class="parent">
    <p class="child">记者从国家税务总局获悉,10月2日,国家税务总局下发通知,部署开展规范影视行业税收秩序工作。根据中央宣传部等五部门关于对影视行业有关问题开展治理的部署安排,针对近期查处的影视行业高收入从业人员偷逃税等问题,国家税务总局要求各地税务机关在前期工作的基础上,按照稳妥推进、分步实施的原则,开展规范影视行业税收秩序工作,促进影视行业健康发展。
    </p>
    </div>

    </body>

  • 相关阅读:
    RabbitMQ修改端口号和心跳时间
    RabbitMQ常用命令行
    机票分页存储过程!
    Sql Server随机取数据
    Entity framewok 如何实现多条记录作为一条取出, for xml path如何实现
    AJAX请求时status返回状态明细表 readyState的五种状态
    最小化到托盘,右键退出
    post注入及提权思路
    MySQL提权之user.MYD中hash破解方法
    鸡肋提权之变态root利用
  • 原文地址:https://www.cnblogs.com/xiadengqi/p/9753012.html
Copyright © 2020-2023  润新知