0

ロゴとして使用している画像があります。

これを常に中央に配置したい（ウィンドウサイズに関係なく）。

私は自動マージンでこれを行うことができませんでした。

画像は、ロゴの上に配置されているナビゲーションの下部を通過する必要があります。

HTML：

<div id="logo">

<img src="images/logorz.png" alt="logo" width="180px" />
</div>

CSS：

#logo {
    position: absolute;
    margin-left:41%;
    margin-top:-7%;


}

NAV HTML：

<div id="nav">

<ul>
    <li><img src="images/kranznav.png" alt="kranz" /><a href="index.php">COMPETE</a></li>
    <li><img src="images/thumbnav.png" alt="thumb" /><a href="index.php">SCORE</a></li>
    <li><img src="images/bagnav.png" alt="bag" /><a href="index.php">SHOP</a></li>
    <li><img src="images/morenav.png" alt="more" /><a href="index.php">MORE</a></li>
</ul>
</div>
<div class="clear">
</div>

NAV CSS：

#nav {
    background:#ffffff;
    width:100%;
    margin-top:-2em;

}


#nav ul {
    list-style-type:none;
}

#nav li {
    display:inline;
    float:left;
    width:20%;
    margin-left:2%;
    margin-right:2%;
    margin-top:5%;
    text-align:center;
}



#nav a {
    display:block;
    margin-right:0% auto;
    padding-left:0% auto;
    color:#5E09CB;
    text-decoration:none;

}

4

5 に答える 5

2

ロゴがwidth: 180px;あり、常に中央に配置したい場合。このようにできます。

position: absolute;
left: 50%;
margin-left: -90px;
于 2013-01-01T17:40:34.350 に答える
1

これには JavaScript を使用する必要はありません。

次の方法で実行できます。

#logo {
    position: absolute;
    left:50%;
    margin-left:-50px;
    width:100px;


}

要素には幅が必要であり、負の左マージンは幅の半分であることに注意してください。

http://jsbin.com/ukexox/1/edit

于 2013-01-01T17:41:21.560 に答える
0

画像をナビゲーションの上に配置する必要がある場合は、z-index プロパティを使用してみてください...

このようなもの...

css {

z-index:2;

}

z-indexを使用して、ある要素を他の要素の上に配置します...他の要素のz-indexをこれよりも小さくしてください...

これはうまくいくかもしれません...

于 2013-01-01T17:39:55.627 に答える
0 
#logo {
    position: relative;
    margin:0 auto;
    width:180px;
}

auto左右の余白が自動的に設定されるため、#logoは常にページ内の中央に配置されます...一部のブラウザではposition:relative、この作業が必要です...

于 2013-01-01T17:40:27.557 に答える
0

nav と image の両方をラップするラッパーが必要です。image タグは不要な div で囲む必要はありません。次に、画像を次のようにスタイルできます

image {
    position:relative;
    widhth: image_size_here px;
    margin: auto;
    display:block;

}

これは、参照用に保存したjsfiddleです... http://jsfiddle.net/vASmC/

于 2013-01-01T17:46:13.183 に答える