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

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

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

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

Answer 2

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

css没有更新屏幕清除缓存，更改浏览器等

2 个答案: