0

さて、私が構築している複数の Web ページのメイン ヘッダーを構築しようとしています。このヘッダーには、画像、画像の下のテキスト中央 (すべてメイン ヘッダーの左側)、ページの中央に配置するメイン ヘッダー、および 2 つのリンク (ホームと連絡先) があります。主見出しの右側に配置されます。これまでのHTMLとCSSは次のとおりです。

<div class="header">
<div class="logoHeader">
<img src="6.jpg">
<p> My Image Header </p>
</div>
<h3> Page Header  </h3>
<a href=""> Home Page </a>
<a href=""> Contact Us </a>
</div>

div.logoHeader {
width: 125px;
}

.logoHeader img {
margin: auto;
display: block;
}

.logoHeader p {
margin: auto;
font-size: 70%;
text-align: center;
font-weight: bold;
}

これにより、画像の下のテキストが正しく中央に配置されますが、ヘッダーをページの中央に配置し、ヘッダーの右側にリンクし、最後にヘッダー div を中央に配置する方法がわかりません。すべてが完了したら、次のようにしたいと思います。

     IMAGE                   
     Image            Main Header (centered within middle of img)       2 links

(テキストは画像の下中央に配置)

これらすべてが私のウィンドウの中央に配置されています。誰でもこれで私を助けることができますか? どんな助けでも大歓迎です。

4

1 に答える 1

0

これには多くの方法がありますが、ここでは 1 つの方法を示します。左 (ロゴと名前) と右 (リンク) を反対側にフロートさせてから、 and を使用text-align:centerしdisplay:inlineてページ ヘッダーを中央に配置します。

/* CSS */
.header {
    background:grey;
    display:inline-block;
    width:100%;
    text-align: center;
}
.logoHeader {
    width: 125px;
    float:left;
}
.pageHeader {
    display: inline;
    margin: 0 auto;
}
.headerLinks {
    float:right;
}
.logoHeader img {
    margin: auto;
    display: block;
}
.logoHeader p {
    margin: auto;
    font-size: 70%;
    text-align: center;
    font-weight: bold;
}

/* HTML (slightly changed) */
<div class="header">
    <div class="logoHeader">
        <img src="6.jpg" />
        <p>My Image Header</p>
    </div>
    <h3 class='pageHeader'>Page Header</h3>  
    <div class='headerLinks'>         
        <a href="">Home Page</a>
        <a href="">Contact Us</a>
    </div>
</div>

デモはこちら

編集

垂直方向にも均等に配置し、ハードコードされたパディングなどを使用しない場合は、代わりにテーブル形式を使用するように設定を変更できます。各セクションの幅などを調整して、思い通りに仕上げる必要があります。上記と同じHTMLを使用しています

.header {
    background:grey;
    vertical-align:middle;
    width:100%;
    padding:15px;
    display:table
}
.header * {
    display:table-cell;
    width:33.3%; /* 100 / number of sections */
    vertical-align:middle;
}
.logoHeader img {
    margin: 0 auto;
}
.logoHeader p {
    display:block;
    margin:0 auto;
    font-size: 70%;
    text-align: center;
    font-weight: bold;
}
.pageHeader {
    text-align:center;
}
.headerLinks {
    text-align:center;
}

表形式アプローチのデモ

このナビゲーションのようなものでは、テーブルは悪い決定ではありませんが、レイアウトにテーブルを使用しないことを推奨する人もいるため、必要display:flex; justify-content:space-aroundに応じて代わりにフレックスボックスを使用することもできます

于 2013-11-13T22:06:50.297 に答える