我想知道如何将文本放在包含图像的div标记中的图像标题中。它总是最终略低于图像？我只是作为一种业余爱好而做的，我并不是很有才。
的CSS
#center
{
background-color:black;
width: 1100px;
height: 1000px;
margin-left:auto;
margin-right:auto;
background-image:inherit;
}
#header
{
width: 100%;
height: 4%;
margin-left:auto;
margin-right:auto;
background-color: black;
background: rgba(0, 0, 0, 0.6);
}
#banner
{
margin-bottom: -12px;
margin-top: -4px;
}
#space1
{
width: 100%;
height: 2%;
}
#space2
{
width: 100%;
height: 1%;
}
#space3
{
margin-left: auto;
margin-right: auto;
width: 2%;
height: 80%;
float: left;
}
#menuBack
{
background-color: black;
height: 75%;
width: 20%;
margin-top: auto;
margin-right:auto;
margin-left: auto;
float: left;
opacity: 0.8;
}
#menu1
{
background-color: inherit;
height: 13%;
width: 30%;
margin-top: 5%;
margin-right: auto;
margin-left: auto;
font-family: "Times New Roman";
font-size: 30;
color:080808;
}
#menu3
{
background-color: inherit;
height: 2%;
width: 30%;
margin-top: -20%;
margin-right: auto;
margin-left: 18%;
margin-bottom:10%;
}
#menu2
{
transition-property: color;'
transition-timing-function: linear;
transition-duration: 0.1s;
color:White;
}
#menu2:hover
{
color: C0C0C0;
}
#content
{
background-color: black;
margin-left: auto;
margin-right: auto;
width: 78%;
height: 80%;
float: left;
opacity: 0.8;
}
#bodyc
{
background-image:url("background.jpg");
}
.image {
position: relative;
}
h2 {
position: absolute;
color:white;
width: 100%;
}
HTML
<html>
<head>
<title>text</title>
<link rel="stylesheet" type="text/css" href="CSSsheet.css">
</head>
<body id = "bodyc">
<div id = "center">
<div id = "space1">
</div>
<div id = "header">
<div class="image">
<img src = "Banner.png" alt= " " width="243" height="43" />
<h2> text </h2>
</div>
</div>
<div id = "space2"> </div>
<div id= "menuBack">
<div id= "menu1"><a href="http://www.google.com" style="text-decoration:none;"><p id = "menu2"><b>Home</b></p></a></div>
<div id= "menu1"><a href="http://www.google.com" style="text-decoration:none;"><p id = "menu2">Next</p></a></div>
<div id= "menu1"><a href="http://www.google.com" style="text-decoration:none;"><p id = "menu2">Next</p></a></div>
<div id= "menu1"><a href="http://www.google.com" style="text-decoration:none;"><p id = "menu2">Next</p></a></div>
<div id= "menu1"><a href="http://www.google.com" style="text-decoration:none;"><p id = "menu2">Next</p></a></div>
<div id= "menu3"><img src ="photographylogo.png" width = "150" height = "125" /></div>
</div>
<div id = "space3"> </div>
<div id= "content">
<p> This is a website </p>
</div>
</div>
</body>
</html>
如果我不够澄清，我愿意接受所有建议和歉意。
最佳答案
您想要将div的位置设置为“相对”
然后将文本和图像的位置设置为“绝对”。