Question

我很抱歉发布另一个垂直对齐问题，但由于我是一个初学者，所以我不知道还能做什么。

我有一个全屏背景图像，我想垂直对齐h1，p和按钮部分，因此无论屏幕高度是多少，文本块都应始终居中。我试图通过在该部分添加margin-top来实现这一点，但它并不完美。我正在使用Bootstrap。

这是我的HTML：

<section id="home">
    <div class="container">
        <div class="row">

            <div class="col-md-6">
                <h1>dolm it</h1>
                <p>Dolm IT is modern design & development agency from Estonia with main focus on complex web systems. We have a really kickass team whose main focus is UI/UX, PHP, Java, AngularJS, HTML & CSS.</p>
                <button type="button" class="btn btn-default white">more</button>
            </div>
        </div>
    </div>
    <!--end container-->
</section>
<!--end home-->

这就是我创建的CSS：

       #home {
            background: -webkit-linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
            background: linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
            background-size: cover;
            width: 100%;
            height: 100vh;
        }

        #home h1 {
            color: #ffffff;
            font-family: 'Akrobat-ExtraBold';
            font-size: 4.9rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 32px;
        }

        #home p {
            color: #ffffff;
            font-family: 'Akrobat-Bold';
            font-size: 1.5rem;
        }

        #home .col-md-6 {
            margin-top: 200px;
            padding: 130px 0 130px 0;
        }

您可以看到测试页here。谢谢你的帮助。

Answer 1

您可以使用display：table或display：table和flex 的混合（如果想要在几行上缩小p） example：

#home {
   background: -webkit-linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
   background: linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
   background-size: cover;
   width: 100%;
   min-height: 100vh;/* modified */
   /* added from here ============================ */
   display:flex;
   flex-flow:column;
   align-items:center;
   justify-content:center;
   text-align:center;/* optionnal, but not the job of justify-content *nor align-items */
 }
body /* + optionnal*/ , h1, p {
  margin:0;
}
.container {
  display:table;
  width:1%;/* will shrink to fit the wider content */
}
 #home h1 {
   white-space:nowrap;/* keep it on one line and make container same width */
 }
/* ================ end added */
 #home h1 {
   color: #ffffff;
   font-family: 'Akrobat-ExtraBold';
   font-size: 4.9rem;
   text-transform: uppercase;
   letter-spacing: 2px;
   white-space:nowrap;
 }
 
 #home p {
   color: #ffffff;
   font-family: 'Akrobat-Bold';
   font-size: 1.5rem;
   display:table;
 }
 
 #home .col-md-6 {
   /* CSS removed here */
 }

<section id="home">
  <div class="container">
    <div class="row">

      <div class="col-md-6">
        <h1>dolm it</h1>
        <p>Dolm IT is modern design & development agency from Estonia with main focus on complex web systems. We have a really kickass team whose main focus is UI/UX, PHP, Java, AngularJS, HTML & CSS.</p>
        <button type="button" class="btn btn-default white">more</button>
      </div>
    </div>
  </div>
  <!--end container-->
</section>
<!--end home-->

在CSS中查看评论以查看新内容或删除内容：）

对于旧版浏览器，唯一显示：表格版本：http://codepen.io/anon/pen/JRwOaV

html {
  height: 100%;
  width: 100%;
  display: table;
}
body {
  display: table-row;
}
#home {
  display: table-cell;
  background: -webkit-linear-gradient(rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
  background: linear-gradient(rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
  background-size: cover;
  width: 100%;
  height: 100vh;
  vertical-align: middle;
}
body,
h1,
p {
  margin: 0;
}
#home h1 {
  white-space: nowrap;
  /* keep it on one line and make container same width */
  color: #ffffff;
  font-family: 'Akrobat-ExtraBold';
  font-size: 4.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  white-space: nowrap;
}
#home p {
  color: #ffffff;
  font-family: 'Akrobat-Bold';
  font-size: 1.5rem;
  display: table;
}
#home .col-md-6 {
  display: table;
  /* again to shrink content on itself*/
  width: 1%;
  margin: auto;
  text-align: center;
}

<section id="home">
  <div class="container">
    <div class="row">

      <div class="col-md-6">
        <h1>dolm it</h1>
        <p>Dolm IT is modern design & development agency from Estonia with main focus on complex web systems. We have a really kickass team whose main focus is UI/UX, PHP, Java, AngularJS, HTML & CSS.</p>
        <button type="button" class="btn btn-default white">more</button>
      </div>
    </div>
  </div>
  <!--end container-->
</section>
<!--end home-->

在div

1 个答案: