Vertical centering element CSS

0
votes

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

1
csspositioning
Take a look here, this may help you stackoverflow.com/questions/4170764/… - Michael
This link is contained in the above question wpdfd.com/editorial/thebox/deadcentre4.html - Michael
Can't you just use a background-image (which then may be centered vertically) and give the outer box a left-padding? @Mike The linked question has only an answer for fixed-height contents. - feeela
@feeela Its good suggestion. I thinks I should do this. - Shahin

1 Answers

3
votes

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/