Align text center(minus) 10px

Question

I have a menu system which uses an image 170px wide by 1px tall (repeated indefinite) It has a 10px border on the left, but a 30px border on the right.

is there a way to center the text, but accounting for the extra 20px on the right side?

Fiddle SiteCode: http://jsfiddle.net/jgallaway81/AXVT5/1/

Relevant Code:

.menubuttonthin {margin-left:0px; margin-top:0px; margin-bottom:0px; width:170px; height:30px; display:block; line-height:30px; font-family:courier; font-size:small; color:#C8C8C8; text-decoration:none; font-weight:900; background-image: url(../_pic-lib/lcars-frame-button-thin.png); }

<a href="http://www.fccorp.us/index.fccorp.php" class="menubuttonthin"> FCCorp.US Story </a>

As you can see, I don't have the links div'd, because they are encapsulated by a div that created the menu area box. Also, I've tried margining and padding both sides, but all that does is increase the size of teh box, throwing off the background image so it doesn't match up to the background image of the site.

Answer 1

Place your text in a <div> and use the following style for it:

text-align:center; 
margin-right:-20px;

For example, if you want to use inline style:

<div style="text-align:center; margin-right:-20px;">

</div>