1

次のコードがあり、テーブル (テーブルには画像の横にある 2 つのテキスト行が含まれています) は、div の中央に垂直方向に配置したくないだけです。何をすべきか？2 つのテキスト行 (laminin beauty と完全にまとめたもの) にテーブルを使用したことに注意してください。これらには異なるスタイルがあり、それらを正当化する必要があるため、td タグに align= center を配置します... (テキスト プロパティのみを正当化します)テキストが同じタグ内にある場合に機能します...) . 私のウェブサイト: http://lamininbeauty.co.za/index2.html

HTML:

        <div id="header">
            <img class="massage" src="images/massage.png" border="none" alt="face massage" />
            <div class="headerDiv">
                <table margin="0" padding="0">
                <tr><td align="center" class="headerText1">Laminin Beauty</td></tr>
                <tr><td align="center" class="headerText2">"Perfectly put together"</td></tr>
                </table>
            </div>
        </div>

CSS:

#header{
    width: 100%;
    height: 100px;
    background: #000000;
}

#header img{
    margin-left: 50px;
    vertical-align: middle;
    display: inline-block;
    float: left;
}

#header div.headerDiv{
    display: table-cell;
    margin-left: 80px;
    vertical-align: middle;
}

.headerText1{
    color: #fff;
    font-family: impact;
    font-size: 32px;
    text-decoration: underline;
}

.headerText2{
    color: #ee00ee;
    font-family: century gothic;
    font-size: 24px;
}

ありがとう！

4

2 に答える 2

3

Wrapper div の高さなので、テーブルを含む div の高さを 100px に固定します。次に、テーブルの高さを 100% にします。これが私のために行ったことのスクリーンショットです。これがあなたが望むものかどうかは完全にはわかりません: http://screencast.com/t/cbwcBbAoM3cZ

于 2012-07-18T20:10:29.840 に答える
0

メイン ヘッダー div の高さが常に 100 ピクセルになる場合はdisplay、要素からプロパティを削除してheaderDivを追加しmargin-top: 12px;ます。

また、追加する必要がdisplay: inline-blockあり、おそらく左余白を減らして補う必要があります。表示プロパティの変更により、ドキュメントの左側ではなく、画像が押し出されます。

また、2 つのテキストを左揃えにしたい場合はtext-align: left、table タグに追加します。

于 2012-07-18T20:07:13.477 に答える