0

CSS-tricksで提案されたChrisCoyierの方法を使用して、コンテナ要素内の一部のコンテンツを（両方の方法で）中央に配置しています。:before互換性のために、この記事で使用されている疑似要素の代わりにセマンティックアプローチを使用しています。何らかの理由でFirefox（Mac用のv.19でテスト済み）が失敗し、正しい修正が何であるかがわかりません（Safari、Opera、IE9、Chromeはすべて正常に動作します）。

ブラウザを検出していくつかの条件付きルールを設定できますが、可能であればこれをグローバルに修正することに興味があります。

別のブラウザでチェックインしたい場合に作成した修正フィドルのコードを次に示します。

CSS：

.block {
    text-align: center;
    background: #c0c0c0;
    margin: 20px 0;
    height: 300px;
}
.content-before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}
.centered {
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
    background: #f5f5f5;
}

HTML：

<div>
    <div class="block">
        <span class="content-before"></span>
        <div class="centered">
            <h1>Some text</h1>
            <p>But he stole up to us again, and suddenly clapping
            his hand on my shoulder, said&mdash;"Did ye see anything
            looking like men going towards that ship a while ago?"</p>
        </div>
    </div>
</div>
4

1 に答える 1

3

.centeredの幅がコンテナーの幅の 100% であり、インライン ブロック要素がオーバーフローを適切に処理しない (そして次の行にプッシュされる)ため、レイアウトが壊れています。

font-size: 0要素の設定を試して.blockから、 で font-size (たとえば、16px) を再宣言してください.centered。それは私のために働いた - http://jsfiddle.net/teddyrised/hJtpF/4986/

.block {
    font-size: 0;
    /* Rest of the styles here */
}
.centered {
    font-size: 16px;
    /* Rest of the styles here */
}

ここでの唯一の欠点は、ピクセル値を使用して font-size を再宣言する必要があることですem。親の font-size が 0 であるため、単位 (私が個人的に最も頻繁に使用する) は機能しません (emは相対単位であり、これではこの場合、emは 0 である親フォント サイズから参照を取得し、0 を掛けたものはすべて 0 になります)。

[編集]: この汚いハックを使用したくない場合は、子.centeredの幅が親コンテナーの幅の 100% ではないことを確認して、空のスペースを確保することもできます。 element .content-before、次の行に沿ったもの:

.centered {
    box-sizing: border-box; /* So that padding is also taken into account */
    width: 90%;
    /* Rest of the styles here */
}

2番目の推奨事項については、フィドルを参照してください- http://jsfiddle.net/teddyrised/hJtpF/4988/

于 2013-03-18T15:38:09.920 に答える