zoukankan      html  css  js  c++  java
  • 前端一些小技巧

    一:.怎样让图片左右上下居中

    1.table-cell

    html

    <div class="con">
            <img src="left.png" alt="">
    </div>    
    

    css

    .con{
                200px;
               height: 200px;
               border: 1px solid #ccc; 
               /* 让图片左右居中 */
               text-align: center; 
               /* 让图片上下垂直居中 */
               vertical-align: middle;
               display: table-cell;
           }
    

    2.position+margin

      html

        <div class="con2">
            <img src="left.png" alt="">
        </div>
    

      css

            .con2{
                 200px;
                height: 200px;
                border:1px solid #ccc;
                position: relative;
            }
            .con2 img{
                position: absolute;
                left:0;
                top:0;
                bottom:0;
                right:0;
                margin: auto;
            }
    

     3.position+transform

      html

        <div class="con3">
            <img src="left.png" alt="">
        </div>
    

      css

            .con3{
                 200px;
                height: 200px;
                border:1px solid #ccc;
                position: relative;
            }
            .con3 img{
                position: absolute;
                left:50%;
                top:50%;
                transform: translate(-50%,-50%);
            }
    

    4.display:box

      html和上面的一样

      css

            .con4 {
                display:box;
                display:-webkit-box;
                -webkit-box-align: center;
                -webkit-box-pack: center;
            }
    

      

    效果图:

    二:文字行数不确定,在父级垂直居中(.wen不能浮动,不然不起效果)

      html

        <div>
            <p class="wen">
                <span>你是谁为了谁我的箱底姐妹,啦啦啦,黑猫警长,不要问我从哪里来我的故乡在运你是谁为了谁我的箱底姐妹,啦啦啦,黑猫警长,不要问我从哪里来我的故乡在运放放</span>
            </p>
        </div>
    

      css

     .wen{
                 400px;
                height: 200px;
                border: 1px solid red;
                font-size: 20px;
                display: table-cell;
                vertical-align: middle;
            }
    

      效果图:

     三:验证码是做什么,是为了解决什么网络问题?

      防止机器短时间内批量恶意提交表单数据。

  • 相关阅读:
    《机电传动控制》学习笔记08-1
    《机电传动控制》学习笔记-07
    《机电传动控制》学习笔记-06
    《机电传动控制》学习笔记05-2
    《机电传动控制》学习笔记05-1
    《团队项目》日志一
    《实时控制软件》第四周作业
    《实时控制软件》第三周作业
    《实时控制软件》第二周作业
    《机电传动控制》PLC仿真
  • 原文地址:https://www.cnblogs.com/SunShineM/p/7723287.html
Copyright © 2011-2022 走看看