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

我有一个菜单系统，它使用一幅170px宽，1px高的图像（重复的不确定）左边有一个10px边框，右边是30px边框。对齐文本中心（减号）10px

有没有办法让文本居中，但在右边占用额外的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封装框。另外，我已经尝试了边距和边距填充，但是所有这些都会增加边框的大小，抛弃背景图片，以至于无法匹配网站的背景图片。

来源

2013-03-08 J.D.

请包括您的代码。你可能不得不使用填充，文本缩进等。但为了帮助你，说明不够清楚。抱歉! – madhushankarox 2013-03-08 01:25:40

负边距可能是此处的最佳选择 – Josh 2013-03-08 01:29:39

对不起，正在尝试更一般地做到这一点。我不得不学习如何使用jsfiddle，但在这里你去：http://jsfiddle.net/jgallaway81/AXVT5/1/ 我不得不上传我的图像到imageshack.us，因为我的托管服务不允许盗链图像。图像通常托管在我自己的域中。至于结果，我有一个小的怪癖，我把它归功于JSF的渲染引擎，因为它在站点加载时完美渲染。 – 2013-03-08 13:49:41

如果我理解你”重新提出问题，一种方法是沿着这些方向做些事情：

CSS;

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

HTML：

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

这会限制股利只非边境地区的内容。

来源

2013-03-08 01:36:47 ultranaut

将您在<div>文本和使用下面的风格吧：

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

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

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

</div>

来源

2013-03-08 01:31:44 Ron

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

答：

直到madhushankarox提到TEXT-INDENT的答案来找我。就文本居中而言，减小链接区域的大小以消除两侧之间的差异，然后使用填充增大大小以确保显示整个按钮图像。

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

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

感谢您的帮助！

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

来源

2013-03-08 14:04:31

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

回答

相关问题