zoukankan      html  css  js  c++  java
  • 元素居中的几种实现方式

    绝对定位方式:
    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>

  • 相关阅读:
    SpringCloud----分布式事务
    ps----基础
    DVWA靶场之XSS(Stored)通关
    DVWA靶场之XSS(Reflected)通关
    DVWA靶场之SQL injection(blind)通关
    CentOS6与CentOS7的几点区别
    DVWA靶场之SQL Injection通关
    DVWA靶场之File Upload(文件上传)通关
    DVWA靶场之File Inclusion(文件包含)通关
    DVWA靶场之CSRF(跨站请求伪造)通关
  • 原文地址:https://www.cnblogs.com/xiadengqi/p/9753012.html
Copyright © 2011-2022 走看看