Question

我正在创建一个小“横幅”类型的div，需要包含2个部分。在左边我有一些h1文本和右边的普通文本。文本部分需要具有相同的高度，文本需要垂直居中。除了垂直居中的文字外，我有我想要的一切。

@import url(//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);

#home-wide {
  height: 100%;
  padding: 30px;
  margin-top: 50px;
  display: flex;
}
.home-wide-part {
  align-items: stretch;
  color: white;
  text-shadow: 2px 2px #000000;
  background-color: red
}
.text-vertical-center {
  height: auto;
  margin: auto;
}

<div class="container">
  <div class="row">
    <div id="home-wide">
      <div class="col-sm-4 home-wide-part">
        <h1>FIND OUT ABOUT OUR SPECIAL OFFERS</h1>
      </div>
      <div class="col-sm-8 home-wide-part">
        <div class="text-vertical-center">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
      </div>
    </div>
  </div>
</div>

编辑：我刚发现我的尝试没有响应，我需要它才能响应，即在小屏幕上相互匹配。

Answer 1

我能想到的最合适的解决方案是：

将背景颜色移至父
使用vertical vertical = middle和float = none创建两个内联块
- 您还需要消除两个方框之间的空白区域

@import url(//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);

#home-wide {
  color: white;
  background-color: red;
  text-shadow: 2px 2px #000000;
}
.home-wide-part {
  float: none;
  display: inline-block;
  vertical-align: middle;
}

<div class="container">
  <div class="row">
    <div id="home-wide">
      <div class="col-sm-4 home-wide-part">
        <h1>FIND OUT ABOUT OUR SPECIAL OFFERS</h1>
      </div><!--
        white space between inline block occupies
        ~4px and messes up % widths... remove it!
   --><div class="col-sm-8 home-wide-part">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </div>
    </div>
  </div>
</div>

Answer 2

#home-wide{
    height: 100%;
    padding:30px;
    margin-top:50px;
    display: flex;
}

#home-wide{
    height: 100%;
    padding:30px;
    margin-top:50px;
    display: flex;
}

.home-wide-part{
    flex:1 0 auto;  
    color: white;
    background-color:red;
    display:flex;
    flex-direction:column;
    justify-content:center;

}

Bootply demo

Answer 3

我将您的文字放入p标签并添加了一个类

 #home-wide {
   height: 100%;
   padding: 30px;
   margin-top: 50px;
   display: flex;
 }
 .home-wide-part {
   align-items: stretch;
   color: white;
   text-shadow: 2px 2px #000000;
   background-color: red
 }
 h1,
 p.right {
   height: 80%;
   margin-top: 10%;
   margin-bottom: 10%;
 }
 /*  .text-vertical-center{
      height: auto;
      margin: auto;
  }*/

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div id="home-wide">
        <div class="col-sm-4 home-wide-part">

          <h1><p>FIND OUT ABOUT OUR SPECIAL OFFERS<p></h1>
        </div>
        <div class="col-sm-8 home-wide-part">
          <div class="text-vertical-center">
            <p class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet, consectetur
              adipiscing elit, sed do eiusmod tempor incididunt ut labore etLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</p>
          </div>

        </div>
      </div>
    </div>
  </div>
</body>

</html>

Bootstrap中心垂直对齐两个文本块

3 个答案: