0

#gallerydivをdivの中央に設定するにはどうすればよい#warpですか？これがデモJSフィドルです。

HTML：

<div id="warp">
    <div id="header">
        <img id="logo_l" src="images/centerwow-logo.png" alt="Centerwow - Web Design - Logo" />
        <img id="Logo_r" src="images/web-design-logo.png" alt="centerwow.com - Portfolio" title="Portfolio" >
        <div id="menu">
            <li><a href="#"  title="About Us">About Us</a>
            <li><a href="#" name="aboutus" title="About Us" >Company Info</a></li>
            <li><a href="#" name="profile"  title="Profile" > Profile</a></li>
        </div>    
    </div>

    <div id="gallery"></div>
</div>

CSS：

html body{
    margin:0;
    padding:0;
}

body{
    background:#F7F7F7;
}

#warp{
    position:relative;
    margin:0 auto;
}

#header {
        position:relative;
        background:#DEEAF4;
        width:80%;
        height: 100px;
        margin:0 auto;

    }
#logo_l{
    position:absolute;
    left:0;
    top:0;
    margin:0;
    padding:0;

}

#Logo_r{
    position:absolute;
    width:272px ;
    height:100px;
    right:0;
    top:0;
    margin:0;
    padding:0;

}    

#menu li {
    display: block;
    vertical-align: top;
    float:left;
    margin: 0 5px;
    }

#menu {
    position:relative;
    width:250px;
    top: 35px;
    margin: 0 auto;

    }
#gallery{
    position:absolute;
    background:#EBF0F5;
    width:80%;
    height:70%;
    margin:10px auto;
    padding:10px;
}    
​
4

3 に答える 3

2

position: absolute中央に含める必要はありません#gallery。これはすでにで達成されmargin: 10px autoます。

さらに、パーセンテージの高さをに設定するには#gallery、その親要素に特定の高さが必要です。この場合、ビューポートの高さに基づいて作成する必要があると思います。そのためには、すべての祖先divの高さが100％である必要があります。

*, html, body, #warp {
    height: 100%;
}

JSフィドル： http： //jsfiddle.net/qc9WL/1/

注：HTMLとCSSにいくつかのバグがあることにも気づきました。

  • スタイルシートの1行目bodyとの間にコンマが必要ですhtml
  • <ul>リストを作成するときは、または<ol>タグを使用する必要があります
  • <li>最後に、 6行目を閉じることを忘れないでください
于 2012-07-15T16:50:50.417 に答える
2

position: absoluteここで何を達成しようとしているのかわかりません。#gallery問題の原因は正確にわかりません（そのため、機能しmargin: 10px autoていません）。削除すると、#gallery要素が中央に配置されます。

また、設定することで、既知の幅の絶対位置の要素を水平方向に中央 揃えにすることができます（この場合、幅を80％に設定しているため、-40％）left: 50%;。margin-left: -40%;#gallery

于 2012-07-15T16:51:17.720 に答える
0

ギャラリーの幅をパーセンテージで指定しているので、左右の余白をパーセンテージで設定してみませんか？

margin: 10px 10%;

部門を中央に配置します

于 2012-07-15T16:57:16.343 に答える