Read More CSS .button { b...">
Geek Answers Handbook

Text position inside an element

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

JPG Image Result

First, the column in which all this is wrapped has a margin-bottom: 14px . This creates an interval between the column and the two horizontal lines below it. This is so if the user wanted to display the button together, the text inside the column would still correspond to the 14px shy of the two lines below.

As you can see, the text for .button aligned in the middle using the css padding and text-align: center property. The button has a margin-top: 14px button margin-top: 14px , which gives the same distance above the button as below it.

However, I found that using the padding element for the text inside the button, it affects the distance around it (in this case, the space under the button, which should be 14 pixels, is now larger than it should be).

Question:

Is there a way to vertically align text inside .button without using the padding property, since I tried vertical alignment, position, float and several others, but without success, without changing the space above or below the field ... What is the best way to do this and, if possible Alternative way to just use an image?

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

+8
html css html5 css3
source share
4 answers

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

  • First, the obvious choice is to use line height.

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

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

    jsfiddle

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

    The button element will 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

LITERATURE

+18
source share

You want to use the line-height style to indicate the height of the line inside. Remember that this can also change the height of the element in some cases (for example, when the line height is greater than the min-height element). See this: http://jsfiddle.net/VvnhJ/

+3
source share

Set line-height to the same value as the height button

+1
source share

I think one thing you can do is use the line-height attribute. Try it:

 .button{ line-height : 27px; }
+1
source share

More articles:


All Articles