0

私はウェブサイトをデザインしていますが、これがアップロードする前に必要な最後のピースです。このサイトや他の多くのサイトを検索しましたが、正直なところ、適切な解決策が見つかりません。できる限り具体的にお伝えします。

www.solarfields.com これは、どの例よりも良い例です。ウェブページの真ん中に、私のコンテンツを彼と同じように配置したい. 彼は Flash を使用していますが、私は HTML と CSS にとどめておきたいと思っています。サイトの本文全体を、次の属性を持つタグで囲みました。

#body {
    position:absolute;
    top:13%;
    left:25%;
    width:350px;
}

モニター (1600x900) の中央に表示されますが、すべての解像度で中央に表示されるようにします。

サイズ: 525px (h) x 350px (w)。

私は複数<div>。

ブラウザの互換性は気にしません。

目に見える境界線は必要ありません。

幅 801px のテーブルが 1 つあります。<td>幅が 29px と 762px の2 つの があります。

私は CSS 初心者なので、ランダムな情報を提供しています。他に何か必要な場合は、@ mattjack66@gmail.com までお気軽にメールしてください。

ありがとうございます。

4

3 に答える 3

1

幅も設定さmargin: 0 auto;れているdivに設定すると、その親コン​​テナ内で中央に配置されます。

具体的には、次のcssを使用します。

div#body {
    width:902px;  //Or whatever your content width is
    margin:0 auto;
    padding:0;
}

そのクラスをサイトの最も外側のdivに適用します。

<html>
    <body>
        <div id"body">
            ...The rest of your content...
        </div>
    </body>
</html>

これは、＃bodyの上下の余白を0に設定し、左右の余白を設定して、それらの間に空のスペースを自動的に分配します。そのdivをページの中央に配置します。これは、左/右の中心に適用されます。

于 2011-03-13T06:31:16.820 に答える
1

水平方向および垂直方向の中央揃え:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
                body div {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    right: 0;
                }
                body div div {
                    position: relative;  
                    top: -262px;
                    height: 525px;                 
                    width: 350px;
                    margin: 0 auto 0;
                    background: #000;
                }
        </style>
    </head>
    <body>
        <div><div>Testing</div></div>
    </body>
</html>
于 2011-03-13T06:19:56.047 に答える
0

解決策: http://jsfiddle.net/magicaj/Xd7sK/5/

水平方向のセンタリングは簡単です。センタリングmargin:0 auto;したい要素を設定するだけです。ただし、要素を垂直方向の中央に配置するのははるかに困難です。CSSを使用して既にテーブルで実行できることを模倣する、CSS のみのソリューションがありvertical-align:middle;ます。私は常に表形式のデータにのみテーブルを使用するように努めていますが、この場合、レイアウト用のテーブルが受け入れられることがわかりました。

HTML:

<table class="wrapper">
    <tr>
        <td>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in  lobortis ante. Phasellus rhoncus, magna adipiscing consequat viverra,  nibh lectus eleifend neque, eget fermentum massa mauris id felis. Morbi  aliquet fermentum quam ut sollicitudin.
            </div>
        </td>
    </tr>
</table>

CSS:

html, body, .wrapper {
    height:100%;   
}

.wrapper {
    margin: 0 auto; /* center horizontally */
}

.wrapper td {
    height:100%;
    vertical-alignment: middle; /* center vertically */   
}

.content {
    width: 350px;
    background:#ccc;
}
于 2011-03-13T06:51:17.043 に答える