Question

我有一个菜单系统，它使用170像素宽，1像素高的图像（重复无限期）左边有10像素边框，右边有30像素边框。

有没有办法使文本居中，但是在右侧会占额外的20px？

小提琴SiteCode：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'd链接，因为它们是由创建菜单区域框的div封装的。此外，我已尝试边缘和填充两边，但所有这一切都是增加teh框的大小，抛弃背景图像，使其与网站的背景图像不匹配。

Answer 1

将文字放在<div>中，并使用以下格式：

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

例如，如果要使用内联样式：

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

</div>

Answer 2

如果我理解你的问题，一种方法就是沿着这些方向做点什么：

CSS;

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

HTML：

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

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

Answer 3

好的，一个意见......我是个白痴。

答案：

直到madhushankarox提到文字缩进才得到答案。缩小链接区域的大小以消除双方之间的差异，就文本居中而言，但是然后使用填充来增加大小以确保显示整个按钮图像。

.menubuttonthin { padding-right:10px; width:160px; }

（仅包括更改）宽度从170px缩小到160px，这创造了居中;填充增加了框的大小，显示了背景（按钮）图像的最后10px

感谢您的帮助！

当然，在我发布之后，我意识到Ultranaut一直都是对的。对于那个很抱歉。我检查你的答案是正确的。感谢。

对齐文本中心（减号）10px

3 个答案: