屏幕上的CSS未更新- 清除缓存，更换浏览器等

Question

我遇到了一个奇怪的问题。无论我如何修改 CSS 样式中的 .blurb，在屏幕上都没有任何改变。我已经在三个浏览器（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 -->

为了消除一些混淆，我有两个相关的问题。

1. 无论我如何清除缓存、更换浏览器等，我都看不到CSS所做的实时更改。

2. 我需要看到的变化是将.blurb居中在容器内，这样无论文本内容如何，它的右侧和左侧都会有相等的空间。

- AMC

---

在您网站的原始CSS中，div.blurb已经居中对齐（其宽度为700px）（在Chrome中尝试使用开发人员工具进行检查）。要居中文本，请使用text-align: center，例如“希望我有所帮助”。 - Alvin Wong

@AlvinWong 我相信原帖作者想要文本仍然靠左对齐，但在页面上居中显示。 - Wex

文本自动换行取决于宽度，因此使用纯CSS实现相当困难。使用一些JavaScript可能会有所帮助。（附注：请重新编写您的问题和标题，因为这不是您的问题） - Alvin Wong

我猜这是一个双重问题。

1. 无论我如何清除缓存、更换浏览器等，我都无法看到CSS所做的实时更改。
2. 我需要看到的变化是将“.blurb”居中放置在容器内，以便无论文本内容如何，其左右两侧都有相等的空间。

- AMC

对于你的第一个问题，你尝试过一些更明显的更改吗，比如设置 color:red 吗？ - Alvin Wong

Answer 1

为了使您的文本居中，您需要使用 text-align 属性：

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

如果你只是想让内容居中，你需要确保其父容器有固定的宽度，或者blurb有固定的宽度。现在，它占用了其父容器的100%（可能是网页），导致水平方向上的margin:auto无效。

- Daniel Li

---

这并没有真正回答问题。 - Wex

我尝试调整 .blurb 的宽度，但无论我做什么，宽度都没有改变，因此居中效果也无法实现。 - AMC

Answer 2

<p> 是一个块级元素。因此，它将占用容器的整个宽度，除非其宽度是固定的。您可以通过使父元素具有 text-align: center 来居中内联元素，例如 <span> 标记。要使 <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/

- Wex

---

好的技巧，唯一需要注意的是IE6（如果OP在意）:P - Alvin Wong

虽然在这种情况下使用内联样式或更复杂的选择器似乎更好，比如.blurb>span。 - Alvin Wong

当然，我只是试图阐述一个观点。我已经更新了我的答案以反映这些选择器。 - Wex

你是否直接打开了CSS文件并尝试重新加载它？你是否使用某种CMS清除了它的缓存？ - Wex

啊，原来是这样。不知道为什么，通过FTP更新文件通常都可以，但在这种情况下却无法工作。直接进入WP并进行了您建议的更改。谢谢。 - AMC