Question

I need to align the text inside the p tag to vertically middle. Since I have given height for the p tag the single line text is vertically aligned to the top of the p tag but when there is 2 lines of description it is perfect.

Height 30px should remains the same. I am ending the content to 2 lines so height should be the same.

Here is the demo
http://jsfiddle.net/ydFy5/1/

Answer 1

Hey now you can define line-height:30px

as like this

p.event_desc{
    background: rgba(0,0,0,0.76);
    padding:4px;
    position:absolute;
    top: 0px;
    color: #ffffff;
    font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 30px;
    margin: 0 4px 0 0; width:93%; height:30px;
}

Live demo http://jsfiddle.net/ydFy5/10/