Question

我的代码很乱。我刚刚创建了一个网站，我试图在标题图像的顶部垂直和水平地居中放置一段文字，同时使其具有移动响应性。

#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>

如果有人能帮助我，那就太棒了。

Answer 1

我尝试的时候确实有效，但是你错过了一个;在你的CSS。试试这个：

.background_title {
  position: absolute;
  font-family: 'Montserrat', sans-serif;
  color: #FFF;
  font-size: 64px;
  left: 50%; 
  top: 50%;
}

你没有关闭＆＃39; left＆＃39;

将响应文本置于标题图像的顶部

1 个答案: