對齊文本中心（減號）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

回答

相關問題