Question

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

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

如果您需要任何进一步的细节，请告诉我。

提前感谢您的帮助。

Answer 1

你想要集中在一起的内容应该都在一个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;
}

试试并告诉我

中心文本和表单（电子邮件输入和提交按钮）在中心图像上

1 个答案: