问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css伪类居中？

头像
夜鹰
    74218101140

    clipboard.png

    如图，蓝色那条是伪类，“推荐”是文字，文字显然向上偏移了一点点，现在想让它们完美居中。

    <p>推荐</p>
    p {
    height: 42px;
    font-size: 14px;
    display: flex;
    align-items: center;
    border: 1px solid red;
    &:before {
        content: '';
        display: block;
        width: 3px;
        height: 14px;
        margin-right: 10px;
        background-color: #10ace5;
    }
}

    求助，谢谢！

    css
    阅读 7.1k
    2 个回答
    得票最新
    头像
    behandyou
      2
      新手上路，请多包涵
      p{
    position:relative;
    
    &:before{
                            //position定位，和margin配合使用
        position:absolute;
        top:50%;
        margin-top:-7px;    // 负的1/2高度
        
                            //也可以用可以用css3 translate来实现 
       transform:translateY(-50%); 
       -webkit-transform:translateY(-50%);
       -moz-transform:translateY(-50%); 
                           //不同的浏览器兼容问题还要加上不同前缀..
    }
}
      头像
      caohanghust
        512
        新手上路，请多包涵

        <!DOCTYPE html>
        <html lang="en">
        <head>

        <meta charset="UTF-8">
<title>Document</title>
<style>
p {
    height: 200px;
    font-size: 100px;
    display: flex;
    align-items: center;
    border: 1px solid red;
}
p:before {
    content: '';
    display: block;
    width: 3px;
    height: 100px;
    margin-right: 10px;
    background-color: #10ace5;
}
</style>

        </head>
        <body>

        <p>推荐</p>

        </body>
        </html>

        clipboard.png

        题主的字太小了，不好观察，把字放大了之后其实是居中的
        没居中的话猜测是p标签继承了父元素的line-height吧

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题