行内元素居中

最新推荐文章于 2023-11-12 23:30:05 发布

weixin_33671935

最新推荐文章于 2023-11-12 23:30:05 发布

阅读量100

点赞数

原文链接：https://yq.aliyun.com/articles/666798

版权

行内元素居中,通用处理办法

给父元素添加一个行内块级元素,高度100%,且vertical-align设置为middle;
所有的子元素vertical-align都设置为middle;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="box">
            <span>不喜欢写代码的程序不是好程序员</span>
            <input type="text" name="" id="" value="" />
            <input type="checkbox" name="" id="" value="" />
            <img src="img/timg.jpeg"/>
        </div>
    </body>
</html>

<style type="text/css">
    .box {
        border: 1px solid #999;
        height: 100px;
    }
    .box:before {
        content: '';
        display: inline-block;
        height: 100%;
        visibility: hidden;
        width: 10px;
        background: green;
        vertical-align: middle;
    }
    .box>* {
        vertical-align: middle;
    }
    input[type=text] {
        height: 30px;
    }
    input[type=checkbox] {
        height: 20px;
    }
    img {
        height: 50px;
    }
</style>