4

我有一个菜单系统，它使用 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 封装的。此外，我尝试了两边的边距和填充，但所做的只是增加框的大小，丢弃背景图像，使其与网站的背景图像不匹配。

4

3 回答 3

8

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

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

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

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

</div>
于 2013-03-08T01:31:44.750 回答
4

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

CSS；

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

HTML：

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

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

于 2013-03-08T01:36:47.703 回答
1

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

回答：

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

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

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

感谢所有的帮助！

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

于 2013-03-08T14:04:31.743 回答