zoukankan html css js c++ java

CSS-布局【1】-图片在div中垂直居中

方法一：通过增加100%高度行内块居中对齐

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type="text/css">
        div{
            width: 600px;
            height: 220px;
            text-align: center;
            border: 1px solid red;
        }

        span{
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }

        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <span></span><img src="demo.jpg">
    </div>
</body>
</html>

方法二：通过table/table-cell样式居中

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type="text/css">
        div{
            width: 600px;
            height: 220px;
            text-align: center;
            border: 1px solid red;
            display: table;
        }

        span{
            display: table-cell;     
            vertical-align: middle;       
        }

        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="container">
        <span><img src="demo.jpg"></span>
    </div>
</body>
</html>

方法三：设置为背景图片居中

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type="text/css">
        div{
            width: 600px;
            height: 220px;
            text-align: center;
            border: 1px solid red;
            background-image: url('demo.jpg');
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

查看全文

相关阅读:
【模板】线段树（区间加）
【模板】树状数组（区间修改+单点查询）
【模板】并查集
 【模板】最小生成树
 LOJ #10130 点的距离
 【模板】最近公共祖先（LCA）
【模板】树状数组
 【模板】堆
 LeetCode 242 Valid Anagram
LeetCode 171 Excel Sheet Column Number

原文地址：https://www.cnblogs.com/godcity/p/5344478.html