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

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

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

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


css text-alignment
person J.D.    schedule 08.03.2013    source источник
comment
Пожалуйста, включите свой код. Возможно, вам придется использовать padding, text-indent... и т.д. Но чтобы помочь вам, инструкции недостаточно ясны. Извиняюсь!   -  person madhushankarox    schedule 08.03.2013
comment
отрицательная маржа, вероятно, лучший выбор здесь   -  person Josh    schedule 08.03.2013
comment
Извините, пытался сделать это немного более общим. Мне пришлось научиться использовать jsfiddle, но вот: jsfiddle.net/jgallaway81/AXVT5/1 Мне пришлось загрузить свои изображения на imageshack.us, потому что мой хостинг не разрешает хотлинкинг изображений. изображения обычно размещаются в моем собственном домене. Что касается результата, то есть одна незначительная особенность, которую я приписываю механизму рендеринга в JSF, поскольку он отлично рендерится при загрузке сайта.   -  person J.D.    schedule 08.03.2013

Ответы (3)


arrow_upward
4
arrow_downward

Если я понимаю ваш вопрос, одним из подходов было бы сделать что-то в этом роде:

CSS;

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

HTML:

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

Это ограничит содержимое div только неграничной областью.

person ultranaut    schedule 08.03.2013

arrow_upward
8
arrow_downward

Поместите текст в <div> и используйте для него следующий стиль:

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

Например, если вы хотите использовать встроенный стиль:

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

</div>
person Ron    schedule 08.03.2013

arrow_upward
1
arrow_downward

Ладно, одно мнение... Я настоящий идиот.

Отвечать:

Ответ пришел ко мне только после того, как madhushankarox упомянул text-indent. Уменьшите размер области ссылки, чтобы устранить разницу между обеими сторонами в том, что касается выравнивания текста по центру, но затем используйте отступы, чтобы увеличить размер, чтобы обеспечить отображение всего изображения кнопки.

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

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

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

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

person J.D.    schedule 08.03.2013