Vertically centering content of :before/:after pseudo-elements

Question

I\'m trying to achieve something similar to this picture:

I have an im

Answer 1

Assuming your element is not an (because pseudo elements are not allowed on self-closing elements), let's suppose it's a

, so a way could be:

div {
    height: 100px ;
    line-height: 100px;
}
div:before, div:after {
    content: "";
    ...
    display: inline-block;
    vertical-align: middle;
    height: ...;
    line-height: normal;
}

If you cannot change the line-height of the div, another way is:

div {
    position: relative;
}
div:before, div:after {
    position: absolute;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    content: "";
    width: ...
}

Otherwise, just place the indicators as a background in center position.

0 讨论(0)

查看其它6个回答

发布评论:

提交评论

---

•  加载中...