4

Web ページのコンテンツをブラウザーの中央に表示する必要があります。画面サイズが大きくても小さくても、解像度が高くても低くても、常にブラウザーの中央に自動的に調整されます。前もって感謝します

私のHtmlとcssコードは以下です

HTMLコード

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="basic1.css"/>
    </head>
<body>

    <div id="menu">
        <a href = "#"><img class="imgc" src="img.png" alt="icon"/></a>
        <a href = "#"><img class="imgd" src="do.png" alt="do"/></a>
    </div>
        <div id="smenu"></div>
    <div id="mainbox">
        <div class="ibox"></div>
    </div>
    <div id="menutext">
    <ul>
        <li><a href="#"><b>???????</b></a></li>
            <li><a href="#"><b>?????</b></a></li>
        <li><a href="#"><b>?????</b></a></li>
        </ul>
    </div>
    <div id="py">
        <pre class="p">??<span style="color:black;font-size:25px">??????</span></pre>
        <pre class="s">?? ???? ??? ??? <span style="color:#980000;
        letter-spacing :+1mm"><b>:3</b></span></pre>
    </div>

    </body>
    </html>

CSS

#menu img.imgc {
position:absolute;
right:77%;
top:10px;
margin:0px auto;
}
#menu img.imgd {
position:absolute;
left:75%;
top:10px;
margin:0px auto;
}
#menu {
position:absolute;
left:0%;
top:0%;
right:0%;
right:0%;
width:100%;
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8; 
}
#mainbox div.ibox{
position:absolute;
left:31%;
top:20px;
border-left:3px solid gray;
height:105px; 
margin:0px auto;
}
#menutext ul{
position:absolute;
right:72%;
top:15px;
list-style: none;
line-height:30px;
margin:0px auto;
}
#menutext a{
font-size:12px;
font-variant:small-caps;
font-family:Lucida,Helvetica,sans-serif;
font-weight:500; 
color:black;
text-decoration: none;
text-align: left;
}
#py pre.p{
position:absolute;
top:15px;
left:33%;
font-family:Tahoma, Geneva, sans-serif;
letter-spacing : +2mm;
font-size:50px;  
color:#009933;
text-decoration: none;
text-align: center;
margin:0px auto;
}
#py pre.s{
position:absolute;
top:67px;
left:33%;
font-family:Tahoma, Geneva, sans-serif;
letter-spacing : +3mm;
font-size:12px;  
color:gray;
text-decoration: none;
text-align: center;
margin:0px auto;
}
4

5 に答える 5

7

すべてのコンテンツを div 内に配置し、そのクラスを次のように設定しcontainerます。

<div class="container">
   ...
</div>

次に、css を使用してマージンを auto に設定します。

.container{
    margin:0px auto;
    width: 600px; 
}

このjsfiddleを見てください

編集

この新しいフィドルを確認してくださいmenu。cssは、あなたが書いたものすべてを必要としません。次のようになります。

#menu {
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8; 
}
于 2012-12-25T07:59:19.530 に答える
1

すべてのページ コンテンツをラッパー div 内に配置し、相対的な幅 (たとえば 50%) と自動水平マージンを指定します。

<div id="wrapper">
   <!-- CONTENT GOES HERE -->
</div>

CSS (ページ幅 50%、上下マージンゼロ):

#wrapper {
    width: 50%;
    margin: 0 auto;
}
于 2012-12-25T07:55:45.553 に答える
0

作業ソリューション。 

<html>
          <head>
            <style type="text/css">
                html
                {
                    width: 100%;
                    height: 100%;
                }

                body
                {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            </style>
        </head>

        <body>
            This is text!
        </body>
</html>
于 2014-10-22T12:11:10.740 に答える
0

すべてのコンテンツの周りに別の div を配置します (body 開始タグの直後と body 終了タグの直前から)。あれを呼べ<div class="container">

その div に次のスタイルを設定します。

width: 1000px;
margin: auto;

これにより、コンテンツが中央に配置されます。

必要に応じて幅を変更できます。

于 2012-12-25T07:55:33.127 に答える
0

Fundation3 のグリッドを使用できます: http://foundation.zurb.com/docs/grid.php

于 2012-12-25T08:09:33.007 に答える