Как центрировать текст внутри якоря -- html поле с участием css пол Связанный проблема

How to center text inside anchor tag


13
vote

проблема

русский

Я хочу, чтобы мой якорный тег выглядеть как кнопка, и создала этот стиль jsfiddle

 <код> watch0  

Похоже, как я хочу, но как в центре текста горизонтально и вертикально внутри якорью тег?

Английский оригинал

I want my anchor tag look like a button, and created this style JsFiddle

.details-button {     background: linear-gradient(to bottom, #FFFFFF 0, #FAB149 2%, #F89406 100%) repeat scroll 0 0 transparent;     border: 1px solid #FAB149;     -ms-border-radius: 3px;     border-radius: 3px;     -webkit-box-shadow: 0 1px 2px #999999;     -ms-box-shadow: 0 1px 2px #999999;     box-shadow: 0 1px 2px #999999;     color: #FFFFFF;     cursor: pointer;     font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;     font-size: 13px;     font-weight: bold;     -ms-text-shadow: 0 -1px #099FDF;     text-shadow: 0 -1px #099FDF;     margin: 4px;     height: 28px;     width: 85px;     vertical-align: central;     align-items: center;     text-decoration: none;     font: menu;     display: inline-block;     /*padding: 6px 0 5px 18px;*/ } 

It looks as I want, but how to center text horizontally and vertically inside anchor tag?

</div
     
   
   

Список ответов

35
 
vote
vote
Лучший ответ
 

Добавить

 <код> text-align: center; line-height: 28px;   

Рабочая демонстрация: http://jsfiddle.net/3se8l/2/

 

Add

text-align: center; line-height: 28px; 

working demo: http://jsfiddle.net/3SE8L/2/

</div
 
 
         
         
3
 
vote

Чтобы выровнять текст в центре горизонтально и в середине вертикально, попробуйте следующее:

CSS: Пример скрипки

 <код> .details-button{   //your existing styles   //height: 28px; <-- remove this entry    text-align: center;   padding: 6px 0;  }   
 

To align your text in the center horizontally and in the middle vertically, try this:

CSS: Example Fiddle

.details-button{   //your existing styles   //height: 28px; <-- remove this entry    text-align: center;   padding: 6px 0;  } 
</div
 
 
     
     
3
 
vote

<Код> line-height и <Код> padding Работа, если высота элемента жестко закодирована, но я люблю использовать

 <код> {   display: flex;   flex-direction: column;   justify-content: center;   text-align: center; }   

Чтобы держать текст, центрированный в тегах, где высота может измениться.

 

line-height and padding work if the height of the element is hard-coded, but I like to use

{   display: flex;   flex-direction: column;   justify-content: center;   text-align: center; } 

to keep text centered in a tags where the height may change.

</div
 
 
 
 
2
 
vote

Сначала удалите этот стиль декларации; Неверная разметка:

 <код> vertical-align: central;   

Далее добавьте это в центр текста горизонтально:

 <код> text-align: center;   

Наконец, сделайте свой высот автоматически и вместо декларации высоты линии, установите прокладку по вкусу:

 <код> height:auto; padding:3px 0;   

Это должно сделать это! Обязательно удалите недопустимую декларацию, поскольку она может привести к разрыву CSS в некоторых браузерах.

 

First, remove this style declaration; it is invalid markup:

vertical-align: central; 

Next, add this to center your text horizontally:

text-align: center; 

Finally, make your height auto and instead of a line-height declaration, set the padding to taste:

height:auto; padding:3px 0; 

That should do it! Be sure to remove the invalid declaration as it can cause your CSS to break in some browsers.

</div
 
 
1
 
vote

Просто <код> text-align: center; в вашем существующем классе.

 

Simply text-align: center; in your existing class.

</div
 
 
   
   
0
 
vote

Так просто, просто добавьте

 <код> text-align: center;   

к вашему целевому классу.

 

So simple, just add  

text-align: center; 

 to your targeted class.

</div
 
 
   
   
0
 
vote

Это работает:

 <код> {    display: grid;    justify-content: center; }   
 

This works:

{    display: grid;    justify-content: center; } 
</div
 
 

Связанный проблема

1  Как проверить отметку Check Column в сетке?  ( How to check mark a check column in a grid ) 
У меня есть флажок Check Column на сетке, которая мне нужна для программически проверки. Вот как сценарий Check Column: <код> columns: { items:[ ...

1  Как я могу сделать пользовательский сортировку на следующем HTML-таблице, заставляя некоторые ряды всегда кажутся под другими?  ( How can i do a custom sort on the following html table forcing some rows to alw ) 
У меня есть следующие данные для списка задач: У меня есть <код> HTML Таблица, отображаемая эти данные, в настоящее время отсортировано по имени задачи ...

0  Как я могу отобразить вывод каждого цикла на петле «для»?  ( How can i display the output of each loop on a for loop ) 
Я общий новичок, и я работаю над «простыми числами» рисованием / анимацией с помощью HTML5 Canvas и JS. Мне трудно с помощью петли «Для», потому что браузер о...

9  Могу ли я установить два фоновых изображения на одном элементе с CSS?  ( Can i set two background images on the same element with css ) 
Образец HTML-кода: <код> belongs_to :y3 Пример файла CSS: <код> belongs_to :y4 Кажется, что часть «B» игнорируется. Есть ли способ Inlclude как из...

15  CSS округлые углы  ( Css rounded corners ) 
Я видел много кодов для этого, но кажется, что он не работает очень хорошо или вообще. Я использовал картинки для округлых углов, но мне нужен код, так что он...

2  Совет инструмента не работает на текстовой зоне Bootstrap  ( Tool tip not working on text area bootstrap ) 
У меня есть форма Bootstrap 3, на которой я применяю Tootip через скрипт. Toottip работает нормально на поле ввода, но не работает над Textarea. <код> <div ...

0  JQuery Mobile Link от PHP до HTML не работает, но URL делает изменения  ( Jquery mobile link from php to html not working but url does change ) 
Хорошо, так что когда я вошел в систему в свое приложение (index.html), я принимаю в login.php, отсюда я хочу меню для пользователя, но ни одна из моих ссылок...

0  Возможное решение этой проблемы проектирования?  ( The possible solution to this design issue ) 
Мне нужно знать, как исправить эту проблему в конструкциях форм .. Получение этого в Firefox И это в IE ... Цвет не является проблемой .. Juz Нужно вы...

0  Jquery value изменить жить  ( Jquery value change live ) 
Пожалуйста, обратитесь к этому HTML. <код> <input type="text" name="amount1" value="10" /> <input type="text" name="amount2" value="5" /> <input type="text"...

1  Переполнение: Авто не работает в Firefox 16  ( Overflowauto not working in firefox 16 ) 
Я знаю, что есть много поста о проблемах переполнения в FF (большинство для старой версии) или в другом месте, но я не могу найти что-то, связанное с моим при...

0  Как вы делаете Div пойти по другому меню Div / NAV, которое не исправлено?  ( How do you make a div go under another div nav menu which is not fixed ) 
Я пытаюсь сделать Div, идут под очередной div, в котором ни один не фиксирован элементы. Вот мой код: <Код> ul { list-style-type: none; margin: ...

0  Скачать изображение из результатов API  ( Download image from api results ) 
Я создаю приложение, которое использует онлайн API для рерантива изображений на основе ключевого слова для поиска. Я запускаю петлю Foreach для рендеринга 12 ...

1  Правильное форматирование ссылки HTML - можно ли два равна внутри одного тега <a>? [Дубликат]  ( Proper html link formatting can two divs be inside of one a tag ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

2  Наличие JSF выпивать поля поиска HTML. Doable?  ( Having jsf spit out an html search field doable ) 
Я не разработчик Java, но работаю с командой, которая использует JSF 1.2 Мы хотели бы начать использовать теги HTML 5 и атрибуты. Не отображается, что JSF 1...

1  Если для JavaScript в XSLT не работает [дубликат]  ( If greater than javascript into xslt doesnt work ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

Связанный проблема

1  Как проверить отметку Check Column в сетке? 
1  Как я могу сделать пользовательский сортировку на следующем HTML-таблице, заставляя некоторые ряды всегда кажутся под другими? 
0  Как я могу отобразить вывод каждого цикла на петле «для»? 
9  Могу ли я установить два фоновых изображения на одном элементе с CSS? 
15  CSS округлые углы 
2  Совет инструмента не работает на текстовой зоне Bootstrap 
0  JQuery Mobile Link от PHP до HTML не работает, но URL делает изменения 
0  Возможное решение этой проблемы проектирования? 
0  Jquery value изменить жить 
1  Переполнение: Авто не работает в Firefox 16 
0  Как вы делаете Div пойти по другому меню Div / NAV, которое не исправлено? 
0  Скачать изображение из результатов API 
1  Правильное форматирование ссылки HTML - можно ли два равна внутри одного тега <a>? [Дубликат] 
2  Наличие JSF выпивать поля поиска HTML. Doable? 
1  Если для JavaScript в XSLT не работает [дубликат]