3

ちょっと変わった問題があります。css to style.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 -->

混乱を解消するために、2 つの関連する質問があります。

1.キャッシュをクリアしたり、ブラウザを変更したりしたにもかかわらず、CSS に加えられた実際の変更を確認できません。

2.確認する必要がある変更は、コンテナー内の中央にある .blurb です。そのため、テキストの内容に関係なく、右側と左側に同じスペースができます。

4

2 に答える 2

3

テキストを中央に配置するには、次を使用する必要がありますtext-align。

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

単にコンテンツを中央に配置したい場合は、その親コン​​テナーの幅が固定されているか、親コンテナーの幅が固定されていることを確認する必要がありますblurb。現在、親コンテナー (Web ページである可能性があります) の 100% を占有margin:autoしているため、水平角度では効果がありません。

于 2012-07-12T17:52:20.473 に答える
3

<p>ブロックレベルの要素です。そのため、幅が固定されていない限り、コンテナの幅全体を占めます。親<span>にtext-align: center. <span>haveを作成するには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 に答える