CSS how to vertically align text within a pseudo element


Tags: html,css,pseudo-element

Problem :

I have created a pseudo element to sit over an unordered list, the css is as follows:

.pricing-column.featured::after {
    content: "Most Popular";
    background: #52BDE6 none repeat scroll 0% 0%;
    color: #FFF;
    width: 80px;
    border-radius: 100%;
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 1000;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9em;
    line-height: 0.9em;
    padding: 10px;
    display: inline-block;
    height: 80px;
}

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

Here is a fiddle http://jsfiddle.net/6dqxt2r3/



Solution :

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;

http://jsfiddle.net/6dqxt2r3/4/


    CSS Howto..

    Newbie CSS/HTML: How to add ad in a div container to the side of the page?

    How to make a div grow with its children when inline-blocks don't fit anymore

    How do I use icons from fontello in my css?

    How to vertically align both image and text in a DIV using CSS?

    How to position absolute in scrollable area? (Css)

    How to position an image of different size using css?

    How to shrink the width size hyperlink?

    How to scroll LI items in a fixed height UL?

    How to properly add margin to elements inside bxSlider

    How to do two border upon one div tag by css or by css3? [duplicate]

    Duplicated footer html/css on another page, but shows up differently?

    How to use cross domain dynamically generated CSS

    How to make TD behaving like TR(row) with CSS?

    How to properly position DIVS on a page to

    how to code a stickyfooter in css?

    How to fix content leaks out of an element despite use of “overflow:hidden”?

    How to stretch div height to fill parent div - CSS

    TW Bootstrap: How to overflow columns

    how to align vertically a dynamic-height div inside another fixed height div

    How to use float and margin together?

    How to position bottom of div above top of its container

    html, css: How to cause a div be presented on top of other divs

    How to make a transparent border using CSS?

    How to increase the size of an unicode icon awesome fonts relative to its container with CSS

    How to change element properties on hover with CSS in following case

    How to segregate these divs with 'position:absolute' into different groups?

    how to make a left aligned navigation with dropdown elements

    how to make the 1st row and first 5 column fixed in css

    How do I get my textboxes to align properly once triggered? - jQuery/CSS

    Showing only one row of items with css independently of users resolution?