3

我有一个奇怪的问题。无论我对样式的 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 -->

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

1.无论我通过清除缓存、更改浏览器等方式做了什么，我都看不到对 CSS 的实时更改。

2.我需要看到的变化是 .blurb 在容器中居中，这样无论文本说什么，它的右边和让边都有相等的空间

4

2 回答 2

3

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

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

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

于 2012-07-12T17:52:20.473 回答
3

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

于 2012-07-12T17:56:25.937 回答