我有两个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>