Question

我试图将我的“你好”放在中心位置。图像中间的文字并保持响应。因为.welcome div位于.section1-bg div之后，它会将文本的高度降低到中心以下。

我怎样才能将我的“你好”作为中心。垂直和水平放置文本，同时仍保持导航栏的位置并保持网站响应？

＆＃13;

body {
  font-family: 'Roboto', sans-serif;
  font-family: 'Spectral', serif;
}

.section1 {
  margin: 0px;
  padding: 0px;
}

.section1-bg {
  background-image: url("Images/b.jpg");
  background-size: cover;
}

.welcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid col-lg-12 section1 section1-bg">
  <div class="row">
    <navbar class="col-lg-offset-3 col-lg-6 col-md-offset-3 col-md-6 col-sm-offset-3 col-sm-6 col-xs-offset-3 col-xs-6">
      <div class="nav-left navbar-brand">
        BRAND
      </div>
      <div class="nav-right pull-right">
        <ul class="nav navbar-nav">
          <li><a href="#section1 page-scroll">HOME</a></li>
          <li><a href="#section2 page-scroll">ABOUT</a></li>
          <li><a href="#section3 page-scroll">PROJECTS</a></li>
          <li><a href="#section4 page-scroll">CONTACT</a></li>
        </ul>
      </div>
    </navbar>
  </div>
  <div class="welcome text-center col-lg-offset-4 col-lg-4">
    <h1>Hello!</h1>
    <h2>Want to see what I've made?</h2>
    <a href="#section3 page-scroll">Yes!</a>
  </div>
</div>

＆＃13;

提前致谢。

当其他元素占据空间时将元素居中

0 个答案: