zoukankan html css js c++ java

css 图片宽度、居中、倒影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        *{
            margin: 0px;
            padding:0px;
        }

        html,body{
            height:100%;
            text-align: center;
        }

        body:after{
            content: "";
            display: inline-block;
            height:100%;
            vertical-align: middle;
            text-align: center;
        }
        img{
            vertical-align: middle;
            -webkit-box-reflect: left 10px;
            overflow: auto;
        }

        .test{
            text-align: left;
            text-indent:32px;
            display: inline-block;
            width:300px;
            height:300px;
            margin:auto;
            vertical-align: middle;
            background-color: pink;
        }
    </style>
</head>
<body>
<img class="test" src="../img/test.jpg" width="200px"/>
</body>
</html>

img 只定义宽度（或者制定一高度，图片会等比缩放），指定高度和宽度会出现拉伸，图片的居中可以决定定为，也可以使用同级的 after 属性设置样式：代码如下

:after{
            content: "";
            display: inline-block;
            height:100%;
            vertical-align: middle;
            text-align: center;
 }

效果：先居中，再向左倒影

查看全文

相关阅读:
c#判断输入的是不是数字
 params 关键字载入空值的陷阱
 拆箱陷阱
 接口的概念和声明
 数据库
 ios 纵向的UISlider
微信小程序学习网站
 Spark RDD(2)
SparkSql
廖雪峰老师学习网站

原文地址：https://www.cnblogs.com/spqin/p/12940060.html