我正在尝试将一些文本和表单(文本输入和提交按钮)置于已经居中的图像上。
我的 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;
}
如果您需要任何进一步的详细信息，请告诉我。
预先感谢您的帮助。
最佳答案
你想要集中在一起的内容应该全部在一个 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;
}
试试看，让我知道
关于html - 在居中图像上居中文本和表单(电子邮件输入和提交按钮)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10385881/