0

CSSに問題があります。別のdivをオーバーレイしているdivのテキストを垂直方向に中央に配置しようとしていますが、テキストは動きません。

編集: JSFiddle の URL は次のとおりです: http://jsfiddle.net/wgSEw/3/

html は次のとおりです。

<div id="footer-top">
            <div id="footer-top-left">
                <div id="footer-logo">
            </div>
            </div>
            <div id="footer-top-transition"></div>

        <div id="footer-top-right"></div>
        <div id="footer-top-bullets">
            <div id="site-map" class="footer-bullet">
                <img src="<?php echo BASE_IMG_URL . 'bulletlight.png'; ?>" alt="some_text">
                <span class="footer-bullet-text">Site Map</span>
            </div>
            <div id="report-issue" class="footer-bullet">
                <img src=<?php echo BASE_IMG_URL . 'bulletlight.png'; ?> alt="some_text">
                <span class="footer-bullet-text">Report an Issue</span>
            </div>
            <div id="submit-professor" class="footer-bullet">
                <img src=<?php echo BASE_IMG_URL . 'bulletblack.png'; ?> alt="some_text">
                <span class="footer-bullet-text">Submit Professor</span>
            </div>
            <div id="submit-school" class="footer-bullet">
                <img src=<?php echo BASE_IMG_URL . 'bulletblack.png'; ?> alt="some_text">
                <span class="footer-bullet-text">Submit a School</span>
            </div> 
        </div>
</div>

現在のCSSは次のとおりです。

#footer-top{
    position: relative;
    width: 960px;
    height: 63px;
    float: left;
    background-image:url('midtilefooter.png');
}

#footer-top-left{
    width: 466px;
    height: 63px;
    float: left;
}

#footer-logo{
    width: 265px;
    height: 63px;
    float: left;
    background-image:url('leftlogo.png');
}

#footer-top-transition{
    width: 27px;
    height: 63px;
    float: left;
    background-image: url('midblacktransition.png');
}

#footer-top-right{
    width: 467px;
    height: 63px;
    float: left;
    background-color: black;
}

#footer-top-bullets{
    position: absolute;
    float: left;
    width: 960px;
    height: 63px; 
    margin-left: 265px;
}

.footer-bullet{
    float: left;
    height: 63px;
    width: 173px;
    color: white;
}

.footer-bullet-text{
    height: 63px;
    color: white;
    top: 50%;
    margin-top: -31px;
    vertical-align: middle;
}

これは基本的に、フッターの上部の基本的な背景を作成し、その背景に箇条書きの div をオーバーレイすることで、背景を覆い隠したり混乱させたりすることなくオーバーレイします。箇条書きは正しい場所に表示され、テキストは水平方向に正しく配置されていますが、垂直方向の中央に配置できません。cssに関する一般的なアドバイスと同様に、どんな助けでも大歓迎です。私はそれにかなり慣れていません。どうもありがとう！

4

1 に答える 1

2

divを垂直方向に中央揃えにする

html

 <div id="parent">
        <div id="child">Content here</div>
    </div>

css オプション 1

#parent {position: relative;}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

親 div と子 div の両方を配置することから始めます。次に、子の上と左の値をそれぞれ 50% に設定します。これが親の中心になります。ただし、これは左上隅を中央に設定するため、まだ完了していません。

子を上 (高さの半分) と左 (幅の半分) に移動する必要があるため、親要素の中心に子が配置されます。これが、子要素の高さ (ここでは幅) を知る必要がある理由です。

そのために、要素の高さと幅の半分に等しい負の上マージンと左マージンを要素に与えます。

最初の 2 つのメソッドとは異なり、これはブロック レベルの要素を対象としています。すべてのブラウザーで機能しますが、コンテンツがコンテナーを超えて大きくなる可能性があり、その場合は視覚的に見えなくなります。要素の高さと幅がわかっている場合に最適です。

css オプション 2

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

このメソッドの考え方は、上、下、右、左の値を 0 に設定することで、子要素を 4 つの端すべてに伸ばすことです。子要素は親要素より小さいため、すべてに到達することはできません。 4 つのエッジ。

ただし、4 辺すべてのマージンとして auto を設定すると、反対側のマージンが等しくなり、子 div が親 div の中央に表示されます。

残念ながら、上記は IE7 以下では機能せず、前の方法と同様に、子 div 内のコンテンツが大きくなりすぎて非表示になる可能性があります。

css オプション 3

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

上記の CSS では、両方の要素に上下のパディングを設定しました。子に設定すると、子のコンテンツが垂直方向に中央に配置され、親に設定すると、子全体が親の中央に配置されます。

各 div が動的に成長できるように、相対測定を使用しています。要素の 1 つまたはそのコンテンツを絶対的な測定値で設定する必要がある場合は、計算を行って、それらが合計されることを確認する必要があります。

たとえば、親の高さが 400px で、子の高さが 100px の場合、上下の両方に 150px のパディングが必要です。

150 + 150 + 100 = 400

この場合、% 値が正確に 150px に対応しない限り、% を使用すると問題が発生する可能性があります。

この方法はどこでも機能します。欠点は、プロジェクトの詳細によっては、少し計算が必要になる場合があることです。ただし、測定値がすべて相対的である柔軟なレイアウトを開発するという考えに同意している場合は、計算を避けることができます。

注: このメソッドは、外側の要素にパディングを設定することで機能します。物事を裏返して、代わりに内側の要素に等マージンを設定できます。私はパディングを使用する傾向がありますが、マージンも使用して成功しています。どちらを選択するかは、プロジェクトの詳細によって異なります。

ソース

于 2012-12-28T04:03:16.397 に答える