文本不以响应式背景图像为中心

Question

我检查了相关帖子的答案，但没有帮助。我想让文本在响应式背景图片的顶部居中 - 仅在可能的情况下使用 CSS。

/*beginning of styling for background img per smashing mag article*/

.hero {
    position: relative;
}
 .hero #page1img {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    font: 0/0 serif;
    text-shadow: none;
    color: transparent;
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.hero #page1img .inner {
    padding-top: 64.700855%; /* 757px h divided by 1170w width/height of image */
    display: block;
    height: 0;
}

/*end of styling for background img per smashing mag article*/

h3 .intro-lead-in {
    padding-top: 100px;
    text-align: center;
    font-family: 'Josefin Slab', serif;
    font-style: italic;
    font-size: 22px;
}

h1 .intro-heading {
    display: inline-block;
    text-align: center;
    font-family: 'Spinnaker', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 50px;
}

/* beginning of media queries for background image per smashing mag article*/

/* default screen, non-retina */
.hero #page1img { background-image: url("https://s9.postimg.org/6c1bhr9u7/header-970px-wide.jpg"); }

    @media only screen and (min-width: 321px) and (max-width: 538px) {
        /* Medium screen, non-retina */
        .hero #page1img { background-image: url("../img/header-538px-wide.jpg"); }
    }

    @media only screen and (max-width: 320px) {
        /* Small screen, non-retina */
        .hero #page1img { background-image: url("../img/header-290px-wide.jpg"); }
    }
      
/* end of media queries for background image per smashing mag article*/

<div class= "row">
  <div class= "col-12">
   <div class="hero">
    <h3 class="intro-lead-in">Welcome to our Club!</h3>
    
    <h1 class="intro-heading">It's Nice to Meet You</h1>
    
    <span id="page1img" aria-label="MacGregor boats">
      <span class="inner"></span>

方法取自 Stephen Thomas 在 Smashing Magazine 上的文章。此处文章 implemented/working 的演示：http://sathomas.me/continental/

这是我的第一个问题，如果我没有把它发布得很正确，我深表歉意。欢迎提出改进建议！

Answer 1

我假设您希望文本层叠在图像之上，水平和垂直居中。

这是一种无需更改大量代码的快速方法。改的CSS在textclass（我做的div的class）。我基本上就是绝对定位，然后距离英雄顶部40%div。颜色变化只是为了让您的示例图片上的文字更清晰。

我将文本包裹在 div 中以便于定位。

/*beginning of styling for background img per smashing mag article*/

.hero {
  position: relative;
}

.hero #page1img {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
  background-size: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.hero #page1img .inner {
  padding-top: 64.700855%;
  /* 757px h divided by 1170w width/height of image */
  display: block;
  height: 0;
}


/*end of styling for background img per smashing mag article*/

h3 .intro-lead-in {
  padding-top: 100px;
  text-align: center;
  font-family: 'Josefin Slab', serif;
  font-style: italic;
  font-size: 22px;
}

h1 .intro-heading {
  display: inline-block;
  text-align: center;
  font-family: 'Spinnaker', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 50px;
}

.text {
  position:absolute;
  text-align:center;
  width:100%;
  top:40%;
  color:#fff;
  
}


/* beginning of media queries for background image per smashing mag article*/


/* default screen, non-retina */

.hero #page1img {
  background-image: url("https://s9.postimg.org/6c1bhr9u7/header-970px-wide.jpg");
}

@media only screen and (min-width: 321px) and (max-width: 538px) {
  /* Medium screen, non-retina */
  .hero #page1img {
    background-image: url("../img/header-538px-wide.jpg");
  }
}

@media only screen and (max-width: 320px) {
  /* Small screen, non-retina */
  .hero #page1img {
    background-image: url("../img/header-290px-wide.jpg");
  }
}


/* end of media queries for background image per smashing mag article*/

<div class="row">
  <div class="col-12">
    <div class="hero">
      <div class="text">
        <h3 class="intro-lead-in">Welcome to our Club!</h3>
        <h1 class="intro-heading">It's Nice to Meet You</h1>
      </div>
      <span id="page1img" aria-label="MacGregor boats">
        <span class="inner">
        </span>
      </span>
    </div>
  </div>
</div>

文本不以响应式背景图像为中心

text not centering on responsive background image

html

css

image

responsive