如何定位放置在背景图像上的标题（h1）并根据它在其容器外居中

Question

在桌面版中，我有一个背景图片和 h1。 H1 根据图像居中，下面我有一些内容。我创建了代码笔来直观地描述（我使用颜色占位符而不是图像）- what I have

<div class="container">
  <h1>Lorem ipsum dolor sit amet.</h1>
</div>

.container {
  position: relative;
  height: 500px;
  background: #ddd;
}
h1 {
  position:absolute;
  text-align: center;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

在移动版中，我需要将 h1 放在图像之外，并在顶部和底部应用一些间距。我创建了另一个代码笔，我在其中更改了标记以显示我需要实现的内容，但使用 CSS - what I need but with CSS

如何使用 CSS 获得第二个 codepen 中的结果？

要点：

h1 必须放在图像上并根据它在桌面版本中居中
h1 必须在图像之外，并且在移动版本中有一些顶部和底部间距。

Answer 1

调整浏览器大小 window <= 480px

.container {
  position: relative;
  height: 500px;
  background: #ddd;
}

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

.content {
  margin-top: 50px;
}

@media screen and (max-width: 480px) 
{
  h1{
    text-align: left;
    margin-top: 300px;
    float: left;
    transform: none;
    left: 0;
  }
  
  p{
    margin-top: 100px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>Lorem ipsum dolor sit amet.</h1>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur tempore veniam, odit odio dolor mollitia pariatur, nihil! Quis quae reprehenderit deserunt vitae nostrum maxime, enim cupiditate illum optio, fugit suscipit. Possimus laboriosam praesentium fuga, labore quia quo minima nulla libero qui amet vitae rerum veritatis alias non cumque laudantium nesciunt.</p>
</div>

Answer 2

请检查 fiddle - https://jsfiddle.net/afelixj/mq3n7we4/3/

使用 @media (min-width: 481px) 将 h1 置于 image 上方。

Answer 3

我对论坛有点陌生，所以我真的不知道如何正确粘贴代码，但我认为这就是您要找的。主要区别在于创建桌面和移动设备 class，这样您就可以控制它们何时出现在屏幕上。这个想法类似于bootstrap 3 使用可见-xs 和隐藏-xs class 的方式。这样您就可以控制不同的视图。它不是最优雅的解决方案，但我认为它可以满足您的需求。

<html>
<head>
<style>
.container {
  position: relative;
  height: 500px;
  background: #ddd;
}

h1 {
  padding: 50px 0;
}

.content {
  margin-top: 50px;
}

.desktop{
 display:none;
}

@media screen and (min-width:481px){
 .desktop{
  display:block;
 }
 .desktop h1{
  position:absolute;
   text-align: center;
   top:50%;
   left: 50%;
   transform: translate(-50%, -50%);
   margin: 0;
 }
 
 .mobile{
  display:none;
 }
}

</style>
</head>
<body>


</body>
<div class="container"><div class="desktop"><h1>Lorem ipsum dolor sit amet.</h1></div></div>
<div class="mobile"><h1>Lorem ipsum dolor sit amet.</h1></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur tempore veniam, odit odio dolor mollitia pariatur, nihil! Quis quae reprehenderit deserunt vitae nostrum maxime, enim cupiditate illum optio, fugit suscipit. Possimus laboriosam praesentium fuga, labore quia quo minima nulla libero qui amet vitae rerum veritatis alias non cumque laudantium nesciunt.</p>
</div>

</html>

如何定位放置在背景图像上的标题（h1）并根据它在其容器外居中

How to position heading (h1) placed on a background image and centered according to it outside of its container

html

css

css-position

responsive-design