css не обновляется на экране - очищен кеш, изменены браузеры и т. д.

У меня какая-то странная проблема. Независимо от того, что я делаю с CSS для стиля .blurb, на экране ничего не меняется. Я очистил кеш в 3 браузерах (FF, Chrome, Safari), но никаких изменений в действующем сайте.

Я пытаюсь центрировать .blurb внутри контейнера, чтобы независимо от того, что написано в тексте, справа и слева от него было равное пространство.

В настоящее время я использую следующее:

.blurb {
    padding-bottom: 100px;
    padding-top: 100px;
    margin: 0 auto;
}

.blurb p {
    font-family: alexandria;
    font-size: 193%;
    font-weight: normal;
    line-height: 1.5;
}

<div class="blurb">
    <p style="text-decoration:underline;color:#f20000;"><span style="color:#282828;">You look like you could use a massage.<br />BodywoRx is here to help.</span></p>
</div><!-- end blurb -->

Чтобы прояснить некоторую путаницу, у меня есть 2 связанных вопроса.

1. Я не вижу изменений, внесенных в CSS, независимо от того, что я сделал, например, очистил кеш, сменил браузер и т. д.

2. Изменение, которое мне нужно увидеть, это .blurb, центрированное внутри контейнера, так что независимо от того, что говорится в тексте, справа и слева от него будет одинаковое пространство.


html padding css margin
person AMC    schedule 12.07.2012    source источник
comment
В вашем исходном css на сайте div.blurb уже центрировано (его ширина составляет 700 пикселей) (в Chrome попробуйте использовать инструменты разработчика для проверки). Чтобы центрировать текст, используйте text-align: center, например, «Надеюсь, я помог».   -  person Alvin Wong    schedule 12.07.2012
comment
@AlvinWong Я почти уверен, что ОП хочет, чтобы текст оставался выровненным по левому краю, но располагался по центру страницы.   -  person Wex    schedule 12.07.2012
comment
Автозаполнение текста зависит от ширины, поэтому на чистом css это сделать довольно сложно. Использование JavaScript может помочь. (P.S. перепишите свой вопрос и заголовок, так как это не ваша проблема)   -  person Alvin Wong    schedule 12.07.2012
comment
Я думаю, это был своего рода вопрос с двумя проблемами. 1. Я не вижу живых изменений, внесенных в CSS, независимо от того, что я сделал, очистив кеш, сменив браузеры и т. д. 2. Изменение, которое мне нужно увидеть, находится в центре контейнера. того, о чем говорится в тексте, справа и слева от него будет одинаковое пространство.   -  person AMC    schedule 12.07.2012
comment
Во-первых, пробовали ли вы какие-то более очевидные изменения, например настройку color:red?   -  person Alvin Wong    schedule 12.07.2012
comment
@AMC - ты смотрел мой ответ?   -  person Wex    schedule 12.07.2012
comment
@Wex, я сделал и пытался реализовать, однако я все еще борюсь с вопросом № 1: я не вижу живых изменений, внесенных в CSS, независимо от того, что я сделал, очистив кеш, сменив браузеры и т. д.   -  person AMC    schedule 12.07.2012

Ответы (2)


arrow_upward
3
arrow_downward

<p> — это элемент блочного уровня. Таким образом, он будет занимать всю ширину контейнера, если его ширина не фиксирована. Вы можете центрировать встроенные элементы, такие как теги <span>, сделав родительский элемент text-align: center. Чтобы <span> иметь text-align: left, используйте display: inline-block.

<p class="blurb">
    <span>
        You look like you could use a massage.<br />BodywoRx is here to help.
    </span>
</p>

CSS:

.blurb { text-align: center; }
.blurb > span { text-align: left; display: inline-block; }

См.: http://jsfiddle.net/Wexcode/h2njQ/.

person Wex    schedule 12.07.2012
comment
хороший хак, единственное, что нужно отметить, это IE6 (если ОП заботится): P - person Alvin Wong; 12.07.2012
comment
хотя в этом случае лучше использовать встроенные стили или более сложные селекторы, например .blurb>span - person Alvin Wong; 12.07.2012
comment
Конечно, я просто пытался проиллюстрировать мысль. Я обновил свой ответ, чтобы отразить эти селекторы. - person Wex; 12.07.2012
comment
Вы открывали свой файл CSS напрямую и пытались перезагрузить его туда? Вы используете какую-то CMS, где вы можете очистить ее кеш? - person Wex; 12.07.2012
comment
Ах, вот оно.. По какой-то причине обновление файлов через FTP, которое обычно работает, не работало в этом случае. Зашел прямо в WP и внес рекомендованные вами изменения. Спасибо. - person AMC; 12.07.2012

arrow_upward
3
arrow_downward

Чтобы центрировать текст, вам нужно будет использовать text-align:

.blurb {
    padding-bottom: 100px;
    padding-top: 100px;
    margin: 0 auto;
    text-align: center;
}

Если вы просто хотите центрировать содержимое, вам нужно убедиться, что его родительский контейнер имеет фиксированную ширину ИЛИ что blurb имеет фиксированную ширину. Прямо сейчас он занимает 100% своего родительского контейнера (который может быть веб-страницей), в результате чего margin:auto неэффективен для горизонтального угла.

person Daniel Li    schedule 12.07.2012
comment
Это на самом деле не отвечает на вопрос. - person Wex; 12.07.2012
comment
Я попытался настроить ширину .blurb, но опять же, независимо от того, что я делаю, ширина не меняется, и поэтому центрирование не действует. - person AMC; 12.07.2012