0

私は個人的な使用のために Web サイトに取り組んでおり、スプラッシュ ページを作成しました。ページを少し分割するために、いくつかの行を含む画像がいくつかあります。スプラッシュページはこちら。

私が抱えている主な問題は、CSS 内で各要素の位置に絶対位置を使用したことです。視聴者が使用する画面によっては、中央ではなく左右に配置されることは明らかです。中央の開始点を使用し、相対位置を使用することを考えました。それは正しい降り方でしょうか？

画面の解像度に関係なく、要素を中央に配置し、その「形成」を実現する特定の方法はありますか?

HTML

<DOCTYPE html>
<html>
    <head>
        <title>Daniel Hopkins Personal Website</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
        <div class="hr_top">&nbsp;</div>
        <div class="hr">&nbsp;</div>
        <div class="hr_bot">&nbsp;</div>
        <center>
            <div class="logo">
                <img src="logo.png"/>
            </div>
            <div class="logoname">
                <img src="logoname2.png"/>
            </div>
            <div class="enter"><b><a href"home.html">Enter</a></b>
            </div>
    </body>
</html>

CSS

body {}
.hr {
    width:2px;
    height:350px;
    background-color:#000000;
    position:absolute;
    top:140px;
    left:884px;
    z- index:10;
    background: -webkit-linear-gradient(white, black, white);
}
.logo {
    position:absolute;
    top:200px;
    left:640px;
    z-index:10;
}
.logoname {
    position:absolute;
    top:260px;
    left:900px;
    z-index:10;
}
.hr_top {
    width:600px;
    height:2px;
    position:absolute;
    top:180px;
    left:640px;
    z-index:10;
    background: -webkit-linear-gradient(left, white, black, white);
}
.hr_bot {
    width:600px;
    height:2px;
    background-color:#000000;
    position:absolute;
    top:442px;
    left:640px;
    z-index:10;
    background: -webkit-linear-gradient(left, white, black, white);
}
.enter {
    position:absolute;
    top:400px;
    left:910px;
    z-index:10;
    font-size:22px;
    font-variant:small-caps;
    font-style:bold;
    font-family:Helvetica;
    color:black;
}
a:link {
    text-decoration:none;
    color:#000000;
}
/* unvisited link */
 a:visited {
    text-decoration:none;
    color:#000000;
}
/* visited link */
 a:hover {
    text-decoration:underline;
    color:#000000;
}
/* mouse over link */
 a:active {
    text-decoration:underline;
    color:#000000;
}
/* selected link */
4

1 に答える 1

1

中央に配置するすべての要素をコンテナー div に配置し、コンテナー div を配置します。次に、必要に応じて他の要素をその中に配置できます

#container{
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}

コメントで会話を繰り返して編集

これは、私のメソッドを示すjsFiddleです。あなたの状況では、このようなものに似ていますが、正確な値を自分で行う必要があります。

この方法を使用すると、コンテナーは絶対的に中央に配置され、他の要素はピクセルまたはパーセントを使用してコンテナーを基準にして絶対的に配置できます (好みに応じて/コンテナーの高さが可変パーセントの場合はより良いでしょう)。

垂直方向にも中央に配置したい場合は、次のようにフォーマットできます。

#container {
  position: fixed;
  height:200px; //whatever you desire it to be
  width:200px; //whatever you desire it to be
  top: 50%;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  margin-top:-100px;// Half the height of container
}
于 2013-07-19T12:41:52.810 に答える