纵向排列内容divor

Question

我有两个div s并排，其中一个（右）有更多的内容，另一个（左）。我一直在尝试拥有正确的，垂直对齐，因此它位于左侧中间。

这里是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

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

.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>