Выравнивать текстовый центр (минус) 10px

У меня есть система меню, которая использует изображение 170px wide на 1px tall (неоднократно неопределенное). Оно имеет границу 10px слева, но границу 30px справа.Выравнивать текстовый центр (минус) 10px

есть способ центрировать текст, но учитывая дополнительные 20px с правой стороны?

Fiddle 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

отрицательный запас, вероятно, лучший выбор здесь – Josh

Извините, я пытался сделать это в более общем плане. Мне нужно было научиться пользоваться jsfiddle, но вот вы: http://jsfiddle.net/jgallaway81/AXVT5/1/ Мне пришлось загружать свои изображения в imageshack.us, потому что мой хостинг-сервис не разрешает хотлинкинг изображения. изображения обычно размещаются в моем собственном домене. Что касается результата, то есть один незначительный причуд, который я отношу к механизму рендеринга в JSF, так как он отлично отображается, когда сайт загружается. –

Если я понять тебя» В качестве одного из подходов можно было бы сделать что-то в этом направлении:

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 упомянутого текста отступа, что ответ пришел ко мне. Уменьшите размер области ссылок, чтобы устранить разницу между обеими сторонами, насколько это касается текстового центрирования, но затем используйте дополнение, чтобы увеличить размер, чтобы обеспечить отображение всего изображения кнопки.

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

(включены только изменения) ширина была сократилась с 170 пикселов до 160px, который создал центрирование; заполнение увеличило размер коробки, показывая последние 10px фона (кнопки) image

Спасибо за помощь!

Конечно, после того, как я опубликовал это, я понял, что Ультраут был прав все время. Извини за это. Я проверил ваш ответ как правильный. Благодарю.

источник

2013-03-08 14:04:31

Выравнивать текстовый центр (минус) 10px

ответ

Смежные вопросы