Как центрировать текст внутри тега привязки

Я хочу, чтобы мой якорь теги выглядят как кнопки, и создал этот стиль 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;*/ 
}

Это выглядит, как я хочу, но как центрировать текст по горизонтали и по вертикали внутри тега привязки?

источник

2014-01-29 Arsen Mkrtchyan

Вертикальное центрирование можно использовать используя line-height. И горизонтали, используя text-align. –

Just FYI: «выравнивание предметов» еще не актуально для большинства веб-браузеров. Кроме того, он применяется только к контейнерам с дисплеем: flex или display: inline-flex, а затем только для блокировки элементов внутри указанных контейнеров, а не для текста. – mellowfish

Добавить

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

рабочую демо: http://jsfiddle.net/3SE8L/2/

источник

2014-01-29 22:34:52 MarcinJuraszek

Выглядит хорошо, могу я спросить, что такое высота линии и где вы взяли номер 28? :) –

Он устанавливает, насколько должна быть высокая простая строка текста. И я установил его на 28, потому что это значение, которое вы задали как элемент 'height'. Это заставляет вашу строку заполнять все пространство и автоматически выравнивает содержимое по вертикали. – MarcinJuraszek

@ArsenMkrt line-height - это высота каждой строки текста в элементе, включая верхнюю и нижнюю строку. Для одной строки текста, если вы установите ее на высоту контейнера, она будет центрировать текст. – mellowfish

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

источник

2014-01-29 22:34:17 mellowfish

хороший, но он установлен только горизонтально –

А, я пропустил «и вертикально» в вашем вопросе. Это намного сложнее сделать автоматически. – mellowfish

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

CSS: Example Fiddle

.details-button{ 
    //your existing styles 
    //height: 28px; <-- remove this entry 

    text-align: center; 
    padding: 6px 0; 
}

источник

2014-01-29 22:37:30 badAdviceGuy

padding made button больше –

@ArsenMkrt, может быть, но вы можете отредактировать дополнение к тому, что вы хотите 2px 3px и т. Д., Или использовать EM, например «.75em» и т. Д. Право? – badAdviceGuy

ну да, но, тем не менее, я хочу, чтобы моя кнопка имела высоту 28px ... или нужно удалить высоту и высоту управления дополнением ... спасибо, однако, по-другому, как это сделать –

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

vertical-align: central;

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

text-align: center;

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

height:auto; 
padding:3px 0;

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

Если это поможет, пожалуйста, проголосуйте за меня! Благодарю. :)

источник

2014-01-29 22:53:34

Да, что помогает! благодаря :) –

Как центрировать текст внутри тега привязки

ответ

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