我的代码一团糟。我刚刚创建了一个网站，我正在尝试将一段文本垂直和水平居中放置在标题图片的顶部，同时使其具有移动响应能力。
#index_header {
position: absolute;
z-index: 0;
left: 0;
top: 0;
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
#index_header img {
position: relative;
float: left;
width: 100%;
height: 100%;
}
.background_title {
position: absolute;
font-family: 'Montserrat', sans-serif;
color: #FFF;
font-size: 64px;
left: 50% top: 50%;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HOME</title>
<link rel="stylesheet" type="text/css" href="css/fluid_index.css" />
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<body>
<div class="page_container">
<div id="index_header">
<a href="#">
<img alt="slider" id="index_headerimg" src="http://www.bakeryandsnacks.com/var/plain_site/storage/images/publications/food-beverage-nutrition/bakeryandsnacks.com/regulation-safety/coles-freshly-baked-claims-false-rules-federal-court-australia/9101085-1-eng-GB/Coles-freshly-baked-claims-false-rules-Federal-Court-Australia.jpg"
/>
<p class="background_title">G.F. Bakery</p>
</a>
</div>
</div>
</body>
</html>如果有人能帮助我，那就太好了。
最佳答案
当我尝试时它确实有效，但你错过了一个;在你的CSS中。 试试这个:
.background_title {
position: absolute;
font-family: 'Montserrat', sans-serif;
color: #FFF;
font-size: 64px;
left: 50%;
top: 50%;
}
你没有关闭'left'。
关于html - 将响应文本置于标题图像的顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34163247/