垂直居中一个浮动元素

最新推荐文章于 2022-07-07 19:54:00 发布

sorcici

最新推荐文章于 2022-07-07 19:54:00 发布

阅读量371

点赞数 1

本文链接：https://blog.csdn.net/sorcici/article/details/42433681

版权

场景：在一个固定高度的div中，有一个浮动的元素，需要将这个浮动元素垂直居中。

原始代码如下:

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <style type="text/css">
    .wrapper{
        width: 400px;
        height: 300px;
        background-color: #1f8dd6;
    }

    button{  
        display: inline-block;
        height: 50px;
        width: 100px;
        line-height: 50px;
    }
    </style>
    </head>

    <body>
        <div class="wrapper">
            <button>float right.</button>
        </div>
    </body>
</html>

现在只是简单的设置这个button浮动，实现的效果看起来就像这样：

人家才不想变成这个样子

现在需要将这个button在整个div里垂直居中。我的做法是在这个button外层加一个span，并且浮动这个span元素而不是之前的button。另外需要设置这个span的高和行高与外层div相同。

span{
    float: right;
    height: 300px;
    line-height: 300px;
}

现在应该就变成这样了：

对嘛就是这样

完整代码：

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <style type="text/css">
    .wrapper{
        width: 400px;
        height: 300px;
        background-color: #1f8dd6;
    }

    span{
        float: right;
        height: 300px;
        line-height: 300px;
    }

    button{  
        display: inline-block;
        height: 50px;
        width: 100px;
        line-height: 50px;
    }
    </style>
    </head>

    <body>
        <div class="wrapper">
            <span>
                <button>float right.</button>
            </span>
        </div>
    </body>
</html>