如何在图像的正中间对齐文本

Question

I have a style that includes both a background and text. I want to align the text in the exact middle of the background.

Currently there is more space below the text than above.

How would I do that?

Check out my jsfiddle: http://jsfiddle.net/vc256tgL/10/

Here's my code:

    <p class="form-title white">
    Download White Paper</p>

Here's my css:

.form-title {
font-family:Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}

.form-title {
    vertical-align: middle;
    height: 55px;
    margin: 0 0 0 0;
    background-image: url('http://www.hapadesign.com/assets/img/bkgd_form_top.png');
    background-repeat: no-repeat;
}

.white { color: #ffffff !important;}

Answer 1

add these lines to form-title class please

line-height:40px;
text-align:center;
background-position:center;

Demo

UPDATE 1 :

Updated Demo

Answer 2

If you want a little bit more flexibility, you can emulate that style using just CSS:

CSS

.tooltip {
   position: relative;
   display: inline-block;
   padding: 10px 25px;
   color: #fff;
   background: blue;
}
.tooltip:after {
   content: '';
   position: absolute;
   top: 100%;
   right: 0;
   left: 0;
   width: 0;
   height: 0;
   margin: 0 auto;
   border-width: 10px;
   border-style: solid;
   border-color: blue transparent transparent;
}

HTML

<p class="tooltip">Here's Some Text</p>

The tooltip arrow is created using a border on an element with no height or width, so it makes the angle you're looking for.

Example: http://codepen.io/a_double/pen/XJjKRg