css不在屏幕上更新 - 清除缓存，更改浏览器等

问题描述：

我有种奇怪的问题。不管我对CSS风格.blurb做什么，屏幕上都没有任何变化。我已经在3个浏览器（FF，Chrome，Safari）中清除了缓存，但似乎没有对live site进行任何更改。css不在屏幕上更新 - 清除缓存，更改浏览器等

我试图让.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个相关的问题。

我看不到，到CSS不管是什么我已经通过清除高速缓存，改变浏览器的方式进行现场做出改变等

2.我需要到的变化看到容器内.blurb居中，这样不管文中说什么，都会有平等的空间，它是正确的，让侧

在您的网站上原有的CSS中，'div.blurb'已经集中（它的宽度为700像素）（在Chrome浏览尝试使用开发人员的工具来检查）要中心文本使用'文本对齐：中心'就像“希望我帮助” – 2012-07-12 17:55:09

@AlvinWong我很确定OP希望文本保持对齐的左侧，但要让它居中页。 – Wex 2012-07-12 17:58:31

文本自动流程取决于宽度，所以用纯CSS做这件事相当困难。使用一些JavaScript可能会有帮助。（P.S.重写你的问题和标题，因为这不是你的问题） – 2012-07-12 18:01:24

答

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

好的黑客，唯一要注意的是IE6（如果OP关心）：P – 2012-07-12 18:05:06

尽管在这种情况下使用内联样式或更复杂的选择器似乎更好，如'.blurb> span' – 2012-07-12 18:17:11

当然，我只是想以说明一点。我已经更新了我的答案以反映这些选择器。 – Wex 2012-07-12 18:57:55

答

要居中你的文字，你将需要使用text-align：

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

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

这并没有真正回答这个问题。 – Wex 2012-07-12 17:57:13

我试过调整.blurb的宽度，但是不管我做什么，宽度都没有改变，因此居中不起作用。 – AMC 2012-07-12 18:17:43

css不在屏幕上更新 - 清除缓存，更改浏览器等

相关推荐