Центрирование динамического текста в CSS

У меня есть названия песен, полученные с моего сервера Icecast, и всегда меняются в соответствии с плейлистом.Центрирование динамического текста в CSS

Очевидно, что некоторые названия более длинные, чем другие, и наоборот.

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

Как я могу это достичь?

The player

Div CSS:

.now_playing div { 
    white-space:nowrap; 
    font-size:13px; 
    line-height:24px; 
    position: relative; 
    min-height: 30px; 
    padding-left: 100px; 
    text-align: center; 
    right: 36px; 
}

Якорь CSS:

.now_playing a { 
    font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", sans-serif; 
    font-size: 12px; 
    color: #fff; 
    text-decoration: none; 
    position: absolute; 
    top: 50%; left: 0; 
    width: 90px; 
    height: 30px; 
    margin-top: -15px; 

}

источник

2013-07-26 TonalDev

Просто удалите позицию: абсолютную от тега. – imperfectinfinity

Вы пробовали .now_playing {margin: 0 auto; } вместо левого: 0 – Tdelang

Вы можете применить это правило

.now_playing a { 
    display: block; 
    width: 100%; 
}

и удалите padding-left: 100px; из .now_playing div селектор.

источник

2013-07-26 12:01:06

Но тогда он охватывает всю ширину, я думаю, он просто хочет, чтобы текст был кликабельным, т. е. тег, центрированный в div? – imperfectinfinity

Да, я предположил, что название песни охватывает всю ширину. поэтому с короткими заглавными песнями, пользователи будут легко переключаться между песнями. –

Ваше решение сработало ... Я пытался центрировать текст по мере изменения названия песни, но это было слишком долго ... используя ваши правила, и уменьшение размера шрифта, похоже, исправить проблему, плохо принять за 5 минут – TonalDev

Для текста использования:

text-align:center;

Для дивы использования:

margin: 0px auto;

See Fiddle

EDIT: добавлены 0px к краю. правильно очистить все поля до центрирования

источник

2013-07-26 12:03:50 hunterc

Shouldn 'it it margin: 0 auto ;? – imperfectinfinity

Центрирование динамического текста в CSS

ответ

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