zoukankan      html  css  js  c++  java
  • css居中

       水平居中

        1:行内元素居中,在行内元素上一级上面的块元素内添加 text-align:center;

        2:块级元素居中,为块级元素css添加  margin:0 auto; (要设置宽高值)

        3:块级元素居中,使用绝对定位position: absolute;同时设置负边距 margin-left: 负值;

      垂直居中

        1:处理文字居中,方法一就是设置把 line-height设置为您需要的box的大小(盒子的height)可以实现单行文字的垂直居中。

        2:要实现高度不固定的文字垂直居中使用padding就好了。

        3: display:table-cell;vertical-align: middle;即让标签元素以表格单元格的形式呈现,table-cell会被其他一些css属性破坏,比如float和position:absolute等等。且一旦         设置为table-cell,这时margin就不能用了。

        4: 在希望垂直居中的块级元素的父级元素的css中添加  display:flex;align-items:center; 可以实现块级元素的垂直居中。

      同时居中

        1:使用绝对定位和负边距position: absolute; margin-left: 负值(width的一半);margin-top: 负值;

        2: 在希望居中的块级元素的父级元素的css中添加 display:flex;align-items:center实现竖直居中,justify-content:center;实现水平居中。

        3: 父元素中设置display:flex;在子元素中设置margin:auto。

        4:text-align: center; line-height:(heigh的值);单行文字可以。

        5: css3属性 transform:translate(-50%,-50%); 使用这个可以实现自适应居中。

       补充:

        1:css3的transform属性

             transform的含义是:改变,使…变形;转换 。  transform:translate():含义:变动,位移;如下表示向右位移120像素transform:translate(120px,0)

             transform:scale():含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。   transform:skew():含义:倾斜。                      transform:rotate():含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”。

       2:vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom |inherit

    baseline:将支持valign特性的对象的内容与基线对齐 

    sub:垂直对齐文本的下标

    super:垂直对齐文本的上标

    top:将支持valign特性的对象的内容与对象顶端对齐

    text-top:将支持valign特性的对象的文本与对象顶端对齐

    middle:将支持valign特性的对象的内容与对象中部对齐

    bottom:将支持valign特性的对象的内容与对象底端对齐

    text-bottom:将支持valign特性的对象的文本与对象底端对齐

    <percentage>:用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。

    <length>:用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)

  • 相关阅读:
    83. Remove Duplicates from Sorted List
    141. Linked List Cycle
    hdu1028 划分数
    XDU1019 阶乘因子的个数
    poj2773 容斥原理
    poj1091 容斥原理的应用
    poj1173 多重集组合数
    HDU 1465 错排问题
    poj 1496
    复习之求一个数的约束之积模一个质数
  • 原文地址:https://www.cnblogs.com/cyjy/p/6158653.html
Copyright © 2011-2022 走看看