html - Vertically center fixed size div inside an other div -


i have created small 'template', containing title, image , 2 links.

i want center template (class: plant-row) vertically in page, can't it.

i have tried use display:table on plant-inner-col, , display:table-cell on template, breaks image size limitation, ends taking entire screen.

could please me find way vertically center box, without giving on setting size?

note: whole thing uses bootstrap, hence classes, don't thing has impact here, therefore, elected keep fiddle simple.

cheers,

.kpi-homepage-container{      margin-left:0px;      margin-right:0px;      padding-left:0px;      padding-right:0px;      top:0;      left:0;      right:0;      bottom:0;      position:fixed;      background-color: #f5f5f5;      width:100%;  }  .plant-col {    height: 100%;    padding-top: 5px;    padding-bottom: 5px;    text-align: center;  }    .plant-inner-col {    height: 100%;    padding-left: 7.5px;    padding-right: 7.5px;    float: none;    margin: 0 auto;  }    .plant-row {    box-sizing: border-box;    box-shadow: 1px 1px 1px;    height: calc((100% - 35px)/2);    text-align: center;    border: 1.5px solid;    border-radius: 2px;    overflow: hidden;  }    .plant-row .plant-name {    font-size: 18px;    padding-top: 5px;  }    .plant-row .plant-img {    height: 70%;  }    .plant-row .plant-link {    height: 15%;    margin-top: 10px;  }
<div class="kpi-homepage-container">    <div class="col-md-12 plant-col">      <div id="template-container" style="max-width:700px; height:100%; margin: 0 auto;">        <div class="col-md-6 plant-inner-col">          <div class="plant-row">            <p class="plant-name">hmd</p><img class="plant-img" src="https://s-media-cache-ak0.pinimg.com/originals/a8/39/35/a83935a027475e34ebace7d4a1ed33e8.jpg">            <div class="row plant-link">              <div class="col-md-6"><a class="btn btn-primary" href="#">to level 0</a></div>              <div class="col-md-6"><a class="btn btn-info" href="#">to level 1</a></div>            </div>          </div>        </div>      </div>    </div>  </div>

is need? turned .plant-inner-col flexbox vertical alignment in center.

.kpi-homepage-container{      margin-left:0px;      margin-right:0px;      padding-left:0px;      padding-right:0px;      top:0;      left:0;      right:0;      bottom:0;      position:fixed;      background-color: #f5f5f5;      width:100%;  }  .plant-col {    height: 100%;    padding-top: 5px;    padding-bottom: 5px;    text-align: center;  }    .plant-inner-col {    height: 100%;    padding-left: 7.5px;    padding-right: 7.5px;    float: none;    margin: 0 auto;    display: flex;    align-items: center;  }    .plant-row {    box-sizing: border-box;    box-shadow: 1px 1px 1px;    height: calc((100% - 35px)/2);    text-align: center;    border: 1.5px solid;    border-radius: 2px;    width: 100%;  }    .plant-row .plant-name {    font-size: 18px;    padding-top: 5px;  }    .plant-row .plant-img {    height: 70%;  }    .plant-row .plant-link {    height: 15%;    margin-top: 10px;  }
<div class="kpi-homepage-container">    <div class="col-md-12 plant-col">      <div id="template-container" style="max-width:700px; height:100%; margin: 0 auto;">        <div class="col-md-6 plant-inner-col">          <div class="plant-row">            <p class="plant-name">hmd</p><img class="plant-img" src="https://s-media-cache-ak0.pinimg.com/originals/a8/39/35/a83935a027475e34ebace7d4a1ed33e8.jpg">            <div class="row plant-link">              <div class="col-md-6"><a class="btn btn-primary" href="#">to level 0</a></div>              <div class="col-md-6"><a class="btn btn-info" href="#">to level 1</a></div>            </div>          </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