css容器内元素垂直水平居中

2020-08-10 18:21发布

如果容器已知高度且容器内需要元素垂直居中,我们可以给容器内添加一个伪元素,设置这个伪元素高度为100%。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            img{
                width: 60px;
                height: 60px;
            }
            .author-image,
            .author-info{
                display: inline-block;
            }
            .author-email,
            .author-name{
                display: block;
            }

            .author-image,.author-info{
                vertical-align: middle;
            }
            .author-meta{
                height: 100px;
                border: 1px solid #ccc;
                text-align: center;
            }
            .author-meta:before{
                content: '';
                display: inline-block;
                vertical-align:middle;
                height: 100%;
            }

        </style>
    </head>
    <body>
        <p class="author-meta">
            <img class="author-image" src="img/cat.jpg" >
            <span class="author-info">
                <span class="author-name">sfhufhaisfhiais</span>
                <a href="" class="author-email">sfasfasfa</a>
            </span>
        </p>
    </body>
</html>

效果:

标签: