CSS - невозможно получить один составной стиль, чтобы переопределить другой унаследованный стиль и выровнять по левому краю - PullRequest
Новая
       9

CSS - невозможно получить один составной стиль, чтобы переопределить другой унаследованный стиль и выровнять по левому краю

2 голосов
/ 09 января 2012

У меня есть класс div.

Внутри div находится тег h1.

Внутри тега h1 есть тег span,с его 'class, установленным в regTalker.

Вот тег: 

<h1><span class="regTalker">Not Listed? Register <a href="?register">here</a></span>Browse Listings</h1>

Класс regTalker выглядит следующим образом: 

.regTalker {
    text-align: left !important;
    font-family: GoodDog;
    font-size: 0.7em;
    color: #000;
}

Контейнер div имеетtext-align значение установлено в центр.

Основная строка внутри тега h1 отображается по центру.

Строка внутри тега span также центрирована, не выровнена по отношению косталось, как я мог бы предположить, что это будет ...

Что дает?Разумеется, !important должно переопределить значение div text-align?

Существует два разных рассматриваемых css-файла: основной и дополнительный, в котором находится класс regTalker ... Эти файлысвязаны друг с другом, поэтому, если это не указано в ответе, это не связано с включением.

Я также очистил кэш и перезагрузил файл css напрямую.Так что это не то, что либо.

Я использую Firefox 8.0.1, еще не пробовал его в других браузерах.

Если у кого-либо есть какие-либо советы или замечания по этой проблеме, или какрешить проблему, будет очень признателен, спасибо!

Ответы [ 3 ]

4 голосов
/ 09 января 2012

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

Если диапазон был бы таким же широким, как его контейнер, то текст в нем был бы выровнен по левому краю, но вы должны применить к нему display: block или display: inline-block, прежде чем назначить ему ширину.

Кроме того, никогда не используйте! Важный. Это в конечном итоге приведет к слезам и скрежету зубов.

2 голосов
/ 09 января 2012

Вы немного не понимаете, как работает text-align.Вы не можете использовать text-align, чтобы изменить выравнивание span внутри его контейнера;text-align влияет на содержимое элемента, к которому он применяется, и не может влиять на его context .(Если бы ваш span был блок-элементом, ваша декларация выровняла бы его содержимое по левому краю внутри него , но все равно не выровняла бы сам span по левому краю в пределах его контейнера.)

0 голосов
/ 09 января 2012

Я использовал это, чтобы ответить на проблему, наиболее описанную в комментариях к ответу от GordonM: 

.regTalker {
    position: relative;
    top: -5px;
    left: -20%;
    margin-right: -10%;
    font-family: GoodDog;
    font-size: 0.7em;
    color: #000;
}

Это использовалось, чтобы держать основной текст внутри тега h1 примерно по центру, применяя позиционирование к элементу span внутри него.

...