html - Vertically align content in side by side divs -


i have 2 divs, side side, 1 (right) has more content other (left). i've been trying have right one, vertical align it's centered in middle of left one.

here codepen: https://codepen.io/anon/pen/ojyznp?editors=1100

trying achieve on desktop: 

.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 birds order strigiformes, includes 200 species of solitary , nocturnal birds of prey typified upright stance, large, broad head, binocular vision, binaural hearing, sharp talons, , feathers adapted                silent flight. exceptions include diurnal northern hawk- owl , gregarious burrowing owl.                <br /> owls hunt small mammals, insects, , other birds, although few species specialize in hunting fish. found in regions of earth except antarctica , remote islands.                <br /> owls divided 2 families: strigidae family of true (or typical) owls; , 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>

add display: flex , align-items: center .pecan-text. demo:

.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 birds order strigiformes, includes 200 species of solitary , nocturnal birds of prey typified upright stance, large, broad head, binocular vision, binaural hearing, sharp talons, , feathers adapted                silent flight. exceptions include diurnal northern hawk- owl , gregarious burrowing owl.                <br /> owls hunt small mammals, insects, , other birds, although few species specialize in hunting fish. found in regions of earth except antarctica , remote islands.                <br /> owls divided 2 families: strigidae family of true (or typical) owls; , 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>


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more