Question

我希望在一张徒步旅行者的照片上显示我的页面标题“数学成就辅导”。我的第一次尝试是创建这个html：

 <div id="wrapper">
      <header>
          <h1>Math Achivement Tutoring</h1>
      </header>
      <div id="hero">
          <img src="http://michaelmossey.com/demo/home-hiker-grayish.jpg" alt="" width="500">
     </div>
</div>

使用这个CSS，想法是将h1定位为绝对：

h1 { 
  text-align:center;
  position: absolute;
  color: #a04040;
}

但这意味着标题不再居中。如果我开始摆弄边距和填充，我可能会遇到其他问题。

   h1 { 
      text-align:center;
      position: absolute;
      color: #a04040;
    }

 <div id="wrapper">
      <header>
          <h1>Math Achivement Tutoring</h1>
      </header>
      <div id="hero">
          <img src="http://michaelmossey.com/demo/home-hiker-grayish.jpg" alt="" width="500">
     </div>
</div>

我有什么选择实现这一目标，是否取决于我最终想要访问此网站的位置？（比如在图片下方添加导航菜单）？有没有简单的演示代码？

Answer 1

首先，相对于#wrapper添加位置，然后：

如果你想要它是垂直的＆amp;水平居中

h1 { 
  text-align:center;
  position: absolute;
  color: #a04040;
  left: 50%;
  top: 50%;
  transform: translate( -50%, -50% );
}

如果你想让它垂直居中

h1 { 
  text-align:center;
  position: absolute;
  color: #a04040;
  top: 50%;
  transform: translateY( -50% );
}

如果你想让它水平居中

h1 { 
  text-align:center;
  position: absolute;
  color: #a04040;
  left: 50%;
  transform: translateX( -50% );
}

Answer 2

正如Loesh Gupta所说：制作包装.wrapper { position: relative; }。要使文本居中，您可以使用多个选项。我会用这样的东西： h1 { position: absolute; left: 50%; right: 50%; transform: translate(-50%, -50%); }

我还可以推荐这个工具：http://howtocenterincss.com/

Answer 3

这是使用flexbox的解决方案：

＆＃13;

#wrapper {
  display: flex;            /* establish flex container */
  flex-direction: column;   /* stack flex items vertically */
  position: relative;       /* establish neares positioned ancenstor for absolute positioning */
  
}
h1 {
  color: red;
}
.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}


.center-aligned {
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div id="wrapper" class="center-aligned">
  <img class="background-image" src="http://michaelmossey.com/demo/home-hiker-grayish.jpg" />
  <div class="text"><h1>Math Achivement Tutoring<h1></div>
</div>

＆＃13;

Answer 4

在div上使用背景图像和在文本上显示flex可能会这样做。确保根据图像在文本上添加高度，使其可以居中。

*{margin: 0 auto;}
.bg{
  background-image:url('http://michaelmossey.com/demo/home-hiker-grayish.jpg');
  height: 380px;
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center center;
}
.bg h1{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 380px;
  font-size: 3em;
  color: #ffffff;
  background-color: rgba(0,0,0,0.5);
}

<div class="bg">
<h1>Math Achivement Tutoring</h1>
</div>

如何在图像上显示h1元素？

4 个答案: