css - 对齐文本中心(减)10px

Question

我有一个菜单系统，它使用一个 170px 宽 x 1px 高的图像(无限重复)它的左侧有一个 10px 的边框，但右侧有一个 30px 的边框。

有没有办法使文本居中，但要考虑右侧的额外 20px？

fiddle 站点代码:http://jsfiddle.net/jgallaway81/AXVT5/1/

相关代码:

.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>

如您所见，我没有将链接划分为 div，因为它们由创建菜单区域框的 div 封装。此外，我已经尝试在两边设置边距和填充，但所做的只是增加框的大小，丢弃背景图像，使其与网站的背景图像不匹配。

Answer 1

如果我理解你的问题，一种方法是按照以下方式做一些事情:

CSS;

foo {
    width: 130px;
    padding: 0 30px 0 10px;
    text-align: center;
}

HTML:

<div class="foo">Whatevs</div>

这会将 div 的内容限制在非边界区域。