CODEWITHSUNDEEP
csspositioning
Shahin
Shahin

Reputation: 12843

Vertical centering element CSS

In below code how do I do vertical center element span with class "ExclamationPoint" ? I want to design it like below picture :


I tried Padding-top and vertical; align but I couldn't style like image
I want to position span with class "ExclamationPoint" vertically middle regardless the height of side DIV.

JSFiddle Link


enter image description here

Upvotes: 0

Views: 135

Answers (1)

Kokos
Kokos

Reputation: 9121

You can force it to the middle of the div like so:

First make sure the parent div (NewsNote) has a position set, so add position:relative;.

Now, you can center .ExclamationPoint by giving it a height of 0, position:absolute; and top:50%;. This will push the div down to the exact middle.

Now the exclamation point will be below the center, to fix this add line-height:0;.

http://jsfiddle.net/vNDUx/1/

Upvotes: 3

Related Questions