在div中设置文字与内部div垂直居中

最新推荐文章于 2023-07-14 13:32:49 发布

weixin_34144848

最新推荐文章于 2023-07-14 13:32:49 发布

阅读量219

点赞数

原文链接：http://www.cnblogs.com/xiaozhumaopao/p/5803188.html

版权

要实现如图一所示的结果：

html代码如下：

<!DOCTYPE html>
<html>

<head lang="zh">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <title>商品管理后台首页</title>
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <div class="content">
        <span>这是一个测试要居中</span>
        <div class="box">我是div中的文字</div>
    </div>
</body>

</html>

相应的less代码

.content{
    width: 500px;
    height: 200px;
    border:1px solid red;
    position: relative;
    line-height: 200px;/*让class=content父div中的文字垂直居中*/
    span{
        background: green;
    }
    .box{
        background: yellow;
        float: left;
        width: 200px;
        height: 100px;
        line-height: 100px;/*让黄色div中的文字内容垂直居中*/
        text-align: center;/*让文字水平居中*/
        position: absolute;
        top:50%;
        margin-top: -50px;
        margin-left: 200px;    
    }
}

②使用vertical-align:middle设置在父元素中的位置，

效果图：

html代码：

<!DOCTYPE html>
<html>
<head lang="zh">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <title>商品管理后台首页</title>
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <div class="content">
        我是div中的文字<div class="pox">我是子元素的文字</div>
    </div>
</body>

</html>

相应的css代码：

.content{
    width: 500px;
    height: 200px;
    line-height: 200px;/*设置其文字内容垂直居中*/
    border:1px solid red;
    .pox{
        background: yellow;
        width: 200px;
        height: 70px;
        display: inline-block; /*一定要将div设置为inline-block*/
        vertical-align: middle;/*设置该元素在父元素中的位置*/
        line-height: 70px;
        border: 1px solid green;
        text-align: center;
    }
}

化简后的核心代码：

.content{
    width: 500px;
    height: 200px;
    line-height: 200px;/*设置其文字内容垂直居中*/
    background:red;
    .pox{
        height: 70px;/*给内部div设置了高度，该div才会垂直居中*/
         display: inline-block; /*一定要将div设置为inline-block*/
        vertical-align: middle;/*设置该元素在父元素中的位置*/
        background: yellow;
    }
}

转载于:https://www.cnblogs.com/xiaozhumaopao/p/5803188.html

weixin_34144848

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在div中设置文字与内部div垂直居中

要实现如图一所示的结果：html代码如下：<!DOCTYPE html><html><head lang="zh"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> &lt...
复制链接

扫一扫