Html 在选择器无法垂直对齐之前？ 这是我的代码，我试图使我的P和前元素垂直Aligin在中间，但都失败了。

这是我的sass代码：

   p {
      /*whatever*/          

      &.subtitle {
      vertical-align: middle;
      color: $theme-blue;
      font-size: 1.4rem;

      &:before {
        display: inline-block;
        transform: translateX(-$p-padding);
        content: '';
        height: 50px;
        width: 5px;
        background-color: $theme-blue;
      }
    }
  }

有人能帮我做吗？谢谢

---

顺便说一句，是不是只有块可以使before sudeo元素显示？

对于垂直对齐，您可以尝试将

显示：表格

和

显示：表格单元格

属性设置为

您的示例HTML将是

<div class="subtitle">
    <div class="text">
        <p>Abstract</p>
    </div>
</div>

.subtitle {
    width:100%;
    height: 50px;
    display: table;
    background:#FFF
}

.text {
    display: table-cell;
    vertical-align: middle;
}

p {
    display: block;
    text-align:left;
    color: #111111;
    margin: 0px;
    position:relative;
    padding-left:20px;
}

.subtitle:before {
   content: '';
   display:block;
   position:absolute;
   height: 50px;
   width: 5px;
   background-color: blue;
}

---

嘿，我刚才试过的每个人都做了：在垂直对齐之前：中间；它是有效的，有人能告诉我为什么吗？你能给我们看看你的HTML代码吗。。？您想让副标题位于特定分区的垂直中心吗？

html只是一个垂直的，因为您使用了高度谢谢，但我认为：在垂直对齐之前：中间；也使它工作，你能让我知道为什么吗？