Question

是否可以将文本中心和中间对齐在伪元素中提供的内容之前和之后？我试图将一个段落放在括号中间。

p:before {
    display: inline-block;
    height: 150px;
    float: left;
    content: "{";
    color: #F1722E;
    font-size: 90px;

}

p:after {
    display: inline-block;
    height: 50px;
    float: right;
    content: "}";
    color: #F1722E;
    font-size: 90px;

}

Answer 1

在这种情况下，您可能希望使用一些relative和absolute定位，您还必须为段落设置宽度。

p {
  position: relative;
  top: 0;
  left: 0;
  width: 250px;
}

http://jsfiddle.net/c6dofq3z/1/

Answer 2

当然，绝对定位它们并使用翻译来确保垂直对齐：

p {
    position: relative;
}

p::before {
    content: "{";
    left: 0;
}

p::after {
    content: "}";
    right: 0;
}

p::before, p::after {
    top: 50%;
    color: #F1722E;
    font-size: 90px;
    position: absolute;
    transform: translateY(-50%);
}

小提琴：http://jsfiddle.net/jonathansampson/c6dofq3z/3/

Pseudo Class之前和之后的问题

2 个答案: