垂直对齐并排 div 中的内容

Question

我有两个 div 并排放置，其中一个（右）比另一个（左）包含更多内容。我一直在尝试让右边的垂直对齐，所以它在左边的中间居中。

这是 CodePen：https://codepen.io/anon/pen/OjyZNP?editors=1100

尝试在桌面上实现类似的功能：

.vertical-align {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.bg-overlay {
  /*background: linear-gradient( rgba(140,113,94, .9), rgba(140,113,94, .1));*/
  background: linear-gradient(rgba(20, 20, 20, .7), rgba(20, 20, 20, .7));
  position: relative;
  display: table;
}

.owl-bg {
  background: url('https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg');
  position: relative;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  color: white;
}

.owl-ttl {
  display: inline-block;
  height: 100%;
}

.owl-ttl-text {
  position: relative;
  z-index: 100;
  color: white;
  display: initial;
  overflow: auto;
  min-height: inherit;
}

.owl-content-text {
  position: relative;
  z-index: 100;
  color: white;
  display: initial;
  overflow: auto;
  min-height: inherit;
  padding: 4vh;
  font-weight: 200;
  padding-left: 6vw;
}

.owl-bg:after {
  clear: both;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="owl-bg col-md-12 col-xs-12">
  <div class="row vertical-align ">
    <div class="bg-overlay col-md-12 col-xs-12">
      <div class="col-md-12 col-xs-12 text-center">
        <div class="pecan-text">
          <div class="col-md-5 col-xs-12 owl-ttl">
            <span class="font-light owl-ttl-text">OWL</span><br/>
            <span class="font-light owl-subt-text"><i>(Carya illinoinensis)</i></span><br/><br/>
          </div>

          <div class="col-md-6 col-xs-12 text-justify owl-content-text">
            <p>
              Owls are birds from the order Strigiformes, which includes about 200 species of mostly solitary and nocturnal birds of prey typified by an upright stance, a large, broad head, binocular vision, binaural hearing, sharp talons, and feathers adapted for
              silent flight. Exceptions include the diurnal northern hawk- owl and the gregarious burrowing owl.
              <br /> Owls hunt mostly small mammals, insects, and other birds, although a few species specialize in hunting fish. They are found in all regions of the Earth except Antarctica and some remote islands.
              <br /> Owls are divided into two families: the Strigidae family of true (or typical) owls; and the Tytonidae family of barn-owls.
            </p>
            <div style="clear:both"></div>
          </div>

          <div class="col-md-1 col-md-4 col-xs-12"></div>
        </div>
      </div>
    </div>
  </div>

Answer 1

为您的 .pecan-text 添加 display: flex 和 align-items: center。演示：

.pecan-text {
  display: flex; /* new */
  align-items: center; /* new */
}

.vertical-align {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.bg-overlay {
  /*background: linear-gradient( rgba(140,113,94, .9), rgba(140,113,94, .1));*/
  background: linear-gradient(rgba(20, 20, 20, .7), rgba(20, 20, 20, .7));
  position: relative;
  display: table;
}

.owl-bg {
  background: url('https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg');
  position: relative;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  color: white;
}

.owl-ttl {
  display: inline-block;
  height: 100%;
}

.owl-ttl-text {
  position: relative;
  z-index: 100;
  color: white;
  display: initial;
  overflow: auto;
  min-height: inherit;
}

.owl-content-text {
  position: relative;
  z-index: 100;
  color: white;
  display: initial;
  overflow: auto;
  min-height: inherit;
  padding: 4vh;
  font-weight: 200;
  padding-left: 6vw;
}

.owl-bg:after {
  clear: both;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="owl-bg col-md-12 col-xs-12">
  <div class="row vertical-align ">
    <div class="bg-overlay col-md-12 col-xs-12">
      <div class="col-md-12 col-xs-12 text-center">
        <div class="pecan-text">
          <div class="col-md-5 col-xs-12 owl-ttl">
            <span class="font-light owl-ttl-text">OWL</span><br/>
            <span class="font-light owl-subt-text"><i>(Carya illinoinensis)</i></span><br/><br/>
          </div>

          <div class="col-md-6 col-xs-12 text-justify owl-content-text">
            <p>
              Owls are birds from the order Strigiformes, which includes about 200 species of mostly solitary and nocturnal birds of prey typified by an upright stance, a large, broad head, binocular vision, binaural hearing, sharp talons, and feathers adapted for
              silent flight. Exceptions include the diurnal northern hawk- owl and the gregarious burrowing owl.
              <br /> Owls hunt mostly small mammals, insects, and other birds, although a few species specialize in hunting fish. They are found in all regions of the Earth except Antarctica and some remote islands.
              <br /> Owls are divided into two families: the Strigidae family of true (or typical) owls; and the Tytonidae family of barn-owls.
            </p>
            <div style="clear:both"></div>
          </div>

          <div class="col-md-1 col-md-4 col-xs-12"></div>
        </div>
      </div>
    </div>
  </div>

垂直对齐并排 div 中的内容

Vertically align content in side by side divs

html

css

alignment

vertical-alignment

bootstrap-grid