CODEWITHSUNDEEP
css
simPod
simPod

Reputation: 13456

Vertically center content added using :after and "content" property

See this css:

div {
  width: 100px;
  height: 100px;
  background: #333;
  color: #fff;
}
div:after {
  content: "test";
  height: 100px;

}

I'm trying to vertically center the content of div:after. How can I do that?

I cannot set line-height to px value as height of the div might be dynamic (height: 100px is just for this example, in my app it stretches according to it's content)

http://codepen.io/anon/pen/ELnsJ

Upvotes: 0

Views: 41

Answers (4)

evu
evu

Reputation: 1071

You can use CSS translate.

See pen: http://codepen.io/jhealey5/pen/Jseyt

    div {
      width: 100px;
      height: 100px;
      background: #333;
      color: #fff;
      position: relative;
    }
    div:after {
      position: absolute;
      content: "test";
      margin-top: 50%;
      transform: translateY(-50%);
    }

Upvotes: 2

G.L.P
G.L.P

Reputation: 7207

Try like this: DEMO

CSS:

div {
  width: 100px;
  height: 100px;
  background: #333;
  color: #fff;
  display:table;

}
div:after {
  content: "test";
  height: 100px;
  display:table-cell;
   vertical-align:middle;
  text-align:center;

}

Upvotes: 1

Tushar
Tushar

Reputation: 4418

You can try this

CSS

div {
  width: 100px;
  height: 100px;
  background: #333;
  color: #fff;
  display: table;
}
div:after {
  content: "test";
  display: table-cell;
  vertical-align: middle;

}

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

Using display:table-cell you can make it vertically align middle.

div:after {
content: "test";
height: 100px;
display:table-cell;
vertical-align:middle;  
}

Upvotes: 1

Related Questions