开发者

Vertical centering element CSS

开发者 https://www.devze.com 2023-04-01 10:39 出处:网络
In below code how do I do vertical center element span with class \"ExclamationPoint\" ? I want to design it like below picture :

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 co开发者_Python百科uldn't style like image

I want to position span with class "ExclamationPoint" vertically middle regardless the height of side DIV.

JSFiddle Link

Vertical centering element CSS


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/

0

精彩评论

暂无评论...
验证码 换一张
取 消