ques-0joj274c

Search A2Z 24

Question : CSS how to vertically align text within a pseudo element

X

I have created a pseudo element to sit over an div element:

<div class="column featured">Test ...</div>

The CSS is as follows:

.column {
    width:200px;
    height:400px;
    background:red;
    position:relative;
    
}
.column.featured::after {
    content: "hello";
    background: #52BDE6;
    position: absolute;   
    display: inline-block;
 }

However, with this, the text inside the pseudo element sits at the top of my element. Is there a way to align vertically-center?

asked April 23, 2017

1 Answers

Dispalying 1 to 1 of 1 |

Easiest way?Add padding top. Little more difficult but better way, use flexbox.
These properties will do

display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
See comments (0) | Comment
Answered More than a year ago
Dispalying 1 to 1 of 1 |

Write your Answer write code <pre class="brush: xml">---code---</pre>

Login as a member to access answering block !! click-here
loading...

×