ques-0joj274c

Search A2Z 24

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

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 7 Months 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...

Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×