html - 位置 h1，边框位于图片中心

Question

我正在用 Bootstrap 3 制作一个横幅，最终结果应该是这样的，并且高度低于 350px;

我现在拥有的代码的一个版本可以是 seen here .

我不确定如何制作 h1和 p标签居中对齐？目前它们在顶部，我无法弄清楚如何定位它们。

当我查看 < 768px 时图片太大了。是因为 cover在header标签？如何让 < 768px 上的图片变小？

header {
  height:100vh;
  background-image:url('https://img2.picload.org/image/daapipii/header-2.jpg');
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
}

@media (max-width:767px) {
  header {
    /*height:100%;*/
    background-attachment:inherit;
    height:100vh;
  }
}

header h1 {
  /*background-color:rgba(255,255,255,0.36);*/
  padding:10px;
  text-align:center;
  border:5px solid rgba(108,111,119,0.19);
  /*box-shadow:0px 0px 1px #333;*/
}

header h1 {
  font-family:'Aladin';
  font-size:71px;
  color:#fff;
  text-shadow:1px 1px 1px #333;
}

@media (max-width:767px) {
  header h1 {
    font-size:41px;
  }
}

header p {
  text-align:center;
  padding-top:20px;
  font-size:26px;
  font-weight:600;
  font-family:'Source Sans Pro';
  /*letter-spacing:2px;*/
  color:#f5f5f5;
  text-shadow:1px 1px 1px #111;
  padding-bottom:20px;
}

@media (max-width:767px) {
  header p {
    font-size:17px;
  }
}

header .row.no-space p {
  text-align:right;
}
/* Social Media Position */
header .row.no-space {
  margin-top:initial;
  bottom:0px;
  position:fixed;
  right:20px;
}

header .fa {
  color:#fff;
  text-shadow:1px 1px 1px #333;
  padding:7px;
}

<header>
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1 text-bg">
                    <h1>Welcome on free feelings</h1></div>
                <div class="col-md-12">
                    <p>Animated header with scroll engine </p>
                </div>
            </div>
            <div class="row hidden-xs no-space">
                <div class="col-md-12">
                    <p>
                        <i class="fa fa-instagram"></i>
                        <i class="fa fa-facebook-official"></i>
                        <i class="fa fa-pinterest-square"></i>
                    </p>
                </div>
            </div>
        </div>
    </header>

Answer 1

要使页面内容垂直居中，我会在您的 <header> 上使用 CSS flexbox像这样的元素:

header {
  display: flex;
  align-items: center;
}

关于图像的大小，在移动设备上将文本与页面顶部对齐是否可以接受？

如果是这样，那么我建议删除 height: 100vh和移动设备标题中的 flexbox。相反，您需要一个与屏幕宽度相关的响应图像，但由于您使用的是背景图像，您可以这样做:

header {
  background-image: url(...);
  background-size: cover;
  height: 0; /* Use padding-bottom to define height */
  padding-bottom: 62%; /*Aspect ratio of image (h/w*100)*/
}