1

すでに中央に配置されている画像の上に、テキストとフォーム（テキスト入力と送信ボタン）を中央に配置しようとしています。

私のHTML/CSSには3つの項目が中央に配置されていますが、次々に画像が中央に配置され、テキストはその下に中央に配置され、入力フォームはその下にあります。

テキストを中央に配置し、中央に配置された画像の上に形成する方法を教えてください。目標は、ブラウザウィンドウのサイズが変更された場合に、3つのアイテムを中央に配置することです。

注：中央に配置しようとしている3つのアイテムの上に他の画像とテキストがあります

私のHTMLは次のとおりです。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>test</title>
    <link rel="stylesheet" href="style.css" />
    </head>
    <body>
    <div class="banner">
        <img src="banner.png" alt="banner" height="250" width="900" />
    </div>

    <p class="textbox">
    some text. some text.some text.some text.some text.some text.some text.some text.some text.
    </p>

    <--Below is the HTML for the centering of the three items. They are centered sequentally NOT on top of the image.

    <div class="formoutline">
        <img src="formboxdark.png" alt="formbox" height="160" width="350" />
    </div>

    <div class="signupnote">
        </p>please sign up.please sign up.please sign up.please sign up.please sign up.please sign up.please sign up.please sign up.please sign up.</p>
    </div>

    <div class=formlocation>
        <form name="input" action="html_form_action.asp" method="get">
            <input type="text" name="user" class="emailfield" value="email@example.com" />
            <input type="submit" class="submitbutton" value="Submit" />
        </form>

</div>
</div>
</body>
</html>

私のCSSは次のとおりです。

 body
    {
    margin: 0;
    padding: 0;
    height: 100%;
    background:url(texture.jpg);
    }
    .banner
    {
    text-align:center;
    margin-top:15px;
    margin-bottom:0px;
    padding:0px;
    }
    .textbox
    {
    text-align: center;
    color:white;
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    font-size:15px;
    }

    /*This is where the CSS for the three items (image, text and form) begins*/

    .formoutline
    {
    text-align:center;
    top:330px;
    left:485px;
    }
    .signupnote
    {
    text-align: center;
    color:#225DCE;
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    font-size:13px;
    }
    .formlocation
    {
    text-align:center;
    }
    .emailfield
    {
    text-align:center;
    height:20px;
    width:200px;
    }
    .submitbutton
    {
    height:28px;
    width:70px;
    }

さらに詳しい情報が必要な場合はお知らせください。

よろしくお願いします。

4

1 に答える 1

1

中央に配置するコンテンツは、すべて 1 つの div タグに含める必要があります。3 つの別々の div タグを使用する必要があります。

<--Below is the HTML for the centering of the three items. They are centered 
sequentally NOT on top of the image.

<div class="style for single containing div">

</p>please sign up.please sign up.please sign up.please sign up.please sign up.please  
sign up.please sign up.please sign up.please sign up.</p>

<form name="input" action="html_form_action.asp" method="get">
        <input type="text" name="user" class="emailfield" value="email@example.com" />
        <input type="submit" class="submitbutton" value="Submit" />
</form>
</div>

その div のスタイル:

.style for single containing div
{
margin: 0 auto; (this will center your div absolutely, even when resizing your window)
background-image: url('formboxdark.png');
background-repeat: no-repeat;
background-position: center;
height: 160px; 
width: 350px; 
text-align: center;
}

それを試して、私に知らせてください

于 2012-04-30T15:24:54.540 に答える