css 未在屏幕清除缓存、更改浏览器等上更新

Question

我遇到了一个奇怪的问题。无论我对 css 做什么以设置 .blurb 样式，屏幕上都没有任何变化。我已经清除了 3 个浏览器（FF、Chrome、Safari）中的缓存，但似乎没有对 live site 进行任何更改。

我试图让.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 在容器内居中，因此无论文本说什么，它的右侧和左侧都会有相等的空间

Answer 1

<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/

Answer 2

要将文本居中，您需要使用text-align：

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

如果您只是希望内容居中，则需要确保其父容器具有固定宽度或 blurb 具有固定宽度。目前，它正在占用其父容器（可能是网页）的 100%，导致margin:auto 在水平角度上无效。