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;
 }

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

查看全文

相关阅读:
Git学习笔记06-版本回退
 python3+selenium入门07-元素等待
 [cerc2017J]Justified Jungle
[codeforces126B]Password
计算几何基础模板
 floyd路径记录
 [数据结构复习]层序建立二叉树
 [patl2-011]玩转二叉树
 [poj3348]Cows
[poj3347]Kadj Squares

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