文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
css - DIV 讓數字水平垂直置中？
天蓬老师
天蓬老师 2017-04-17 14:52:41
[HTML讨论组]
0 7 743
举报 
.unsolve
{
    position: absolute;
    right: 10px;
    top:50%;
    transform: translate(0,-50%);
    z-index: 1;
    font-size: 13px;
    background-color: red;
    border-radius: 50%;
    color:#fff;
    width: 15px;
    height: 15px;
    padding: 5px;
    text-align: center;
}

<p class="unsolve">12</p>

這樣設定的時候，數字都會中間偏下，沒辦法完全中間。
請問該怎麼讓他完全水平垂直置中？

天蓬老师
天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(7)
PHP中文网
PHP中文网2017-04-17 14:54:41 7楼 

.unsolve
    {
        position: absolute;
        right: 10px;
        top:0;
        bottom: 0;
        margin:auto;
        z-index: 1;
        font-size: 13px;
        background-color: red;
        border-radius: 50%;
        color:#fff;
        width: 15px;
        height: 15px;
        line-height: 15px;
        padding:5px;
        text-align: center;
        
    }
赞 +0
添加回复
巴扎黑
巴扎黑2017-04-17 14:54:41 6楼

不用这么麻烦
单行文字
将行高 line-height 和 height 设为相等即可
多行文字
需要将文字抱在p标签中
外层p display:table 内层p display:table-cell

赞 +0
添加回复
阿神
阿神2017-04-17 14:54:41 5楼

text-align:center; + line-height:容器元素高度

赞 +0
添加回复
伊谢尔伦
伊谢尔伦2017-04-17 14:54:41 4楼

既然你都设置 height 了，那就直接设置 line-height 吧

赞 +0
添加回复
天蓬老师
天蓬老师2017-04-17 14:54:41 3楼

**设置一下行高就好了 transform: translate(0,-50%)
这句 可以 删除**

赞 +0
添加回复
黄舟
黄舟2017-04-17 14:54:41 2楼

单行的垂直居中 使用line-height 即可。

赞 +0
添加回复
迷茫
迷茫2017-04-17 14:54:41 1楼

p中单行文字垂直居中，设置line-height和height两个属性，且两者值相同即可实现。

赞 +0
添加回复
专题推荐
更多>
热门话题
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部