Text position inside <a> element

Question

This is what my current code looks like:

HTML:

<a class="button" href="#">Read More</a>

CSS:

.button {
background:url('../images/btn_bg.jpg') repeat scroll 0% 0%;
font: 12px Helvetica, Arial, sans-serif;
color: #FFF;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
text-align: center;
text-decoration: none;

cursor: pointer;
border: none;

min-width: 87px;
min-height: 29px;

float: right;
margin-top: 14px;

padding-top: 4.25px;

transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}

.button:hover {
background: url('../images/btn_over.jpg') repeat scroll 0% 0%;
}

Result:

---

Firstly, the column that this is all wrapped in has a margin-bottom: 14px. This creates the spacing from the column and the two horizontal lines below it. This is so if the user wanted to take the button out all together, the text inside the column would still meet 14px shy from the two lines below.

As you can see the text for the .button is aligned to the middle by using the css padding property and text-align: center. There is a margin-top: 14px on the button which gives the same spacing above the button as under it.

However, what I am finding is that by using the padding element for the text inside the button, it affects the distance around it (in this case, the space below the button which is meant to be 14px, is now bigger than what it should be).

Question:

Is there a way to vertically align the text within the .button without using the padding property as I have tried vertical-align, position, float and a few others but to no success without changing the space above or below the box...what is the best way to go about this and if possible, an alternative way to just using an image instead?

Any help would be greatly appreciated. http://jsfiddle.net/9xpfY/

Answer 1

There are two ways you can do this, however without javascript both of these methods require absolute heights although the second option works relative to the padding you have set.

---

• The first, an obvious choice is the use of line height.

  This works by setting the height of the line of text to a value, and because text is already natively vertically aligned to the center of the line-height you get the effect you are looking for.

  adding the line line-height : 27px; to .button { will give you your desired result.

  jsfiddle

---

• The second way is to wrap the text inside the element in a span tag and set the bottom property to bottom: -6.75px;

  Your button element would look like this

  <a class="button" href="#"><span id="buttontext">Read More</span></a>

  and you would add this line to your css:

  #buttontext {position: relative; bottom: -6.75px;}

  jsfiddle

REFERENCES

• line-height

• bottom