Question

这是我的代码，我尝试将我的p和之前的元素vertical-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;
      }
    }
  }

有人可以帮我做吗？感谢。

顺便说一句，是否只有块可以使之前的sudeo-element显示？

Answer 1

对于垂直对齐，您可以尝试display:table和display:table-cell属性，

Check this fiddle here

您的示例HTML将，

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

您的示例CSS将，

.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;
}

在选择器无法垂直对齐之前？

1 个答案: