垂直居中

時間 2019-11-17

標籤垂直居中简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
        .container{
            width: 300px;
            height:300px;
            background:#ccc;
            float:left;
            text-align:center;
            display:table;
        }
        .box{
            display:table-cell;
            vertical-align:middle;
        }
        .img-box{
            width:300px;
            height:300px;
            background:#F88;
            text-align:center;
            float:left;
            display:table;

        }
        .img-box span{
            display:table-cell;
            vertical-align:middle;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box">
        <p>看我是否能夠居中。</p>
        <p>看我是否能夠居中。</p>
        <p>看我是否能夠居中。</p>
        <p>看我是否能夠居中。</p>
        <p>看我是否能夠居中。</p>
    </div>
</div>
<!--下面是代碼任務區-->
<div class = "img-box">
    <span>
        <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
    </span>
</div>
</body>
</html>

相關標籤/搜索