1

我试图在已经居中的图像上居中一些文本和表单（文本输入和提交按钮）。

我的 HTML/CSS 将三个项目居中，但一个接一个，即图像居中，文本居中下方，我的输入表单位于下方。

你能告诉我如何让我的文本和表格在一个居中的图像上居中。如果浏览器窗口的大小发生变化，最终目标是让这三个项目保持居中。

注意：我在尝试居中的三个项目上方还有其他图像和文本

我的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

你想要集中在一起的内容应该都在一个 div 标签中，而不是像你在那里的 3 个单独的标签：

<--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 回答