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

【问题标题】：Align text center(minus) 10px对齐文本中心（减号）10px
【发布时间】：2013-02-23 11:23:32
【问题描述】：

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

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

小提琴站点代码：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 封装的。另外，我尝试了两边的边距和填充，但所做的只是增加框的大小，丢弃背景图像，使其与网站的背景图像不匹配。

【问题讨论】：

请附上您的代码。您可能必须使用填充、文本缩进...等。但是为了帮助您，说明不够清楚。对不起！
负边距可能是这里最好的选择
抱歉，我试图更通用地执行此操作。我必须学习如何使用 jsfiddle，但你去吧：jsfiddle.net/jgallaway81/AXVT5/1 我必须将我的图像上传到 imageshack.us，因为我的托管服务不允许对图像进行热链接。这些图像通常托管在我自己的域中。至于结果，我将一个小怪癖归咎于 JSF 的渲染引擎，因为它在网站加载时完美渲染。

标签： css text-alignment

【解决方案1】：

将您的文本放在<div> 中并使用以下样式：

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

例如，如果你想使用内联样式：

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

</div>

【讨论】：

【解决方案2】：

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

CSS;

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

HTML：

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

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

【讨论】：

【解决方案3】：

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

答案：

直到 madhushankarox 提到 text-indent，我才得到了答案。就文本居中而言，减小链接区域的大小以消除两边的差异，然后使用填充来增加大小以确保显示整个按钮图像。

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

（仅包括更改）宽度从 170px 缩小到 160px，从而创建了居中；填充增加了盒子的大小，显示了背景（按钮）图像的最后 10 像素

感谢大家的帮助！

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

【讨论】：