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

.htaccess - ERR_TOO_MANY_REDIRECTS htaccess -

could can explain me .htaccess code doing? rewriterule ([0-9]+)/([^t]{1}[a-za-z0-9_-]{0,})\.([^s]{1}[a-za-z0-9]+)$ ../items/go.php?u=$1/$2.$3 i have folder : mywebsite.com/download/folder1/ .htaccess file in uplevel mywebsite.com/download/ folder contains code above. when access file directly path mywebsite.com/download/folder1/file.mp4 returns error : mywebsite.com redirected many times. try clearing cookies. err_too_many_redirects i tried clear browser cookies issue persist. issue solved when commented out htaccess line above. this rule appears looking specific pattern consisting of: <numbers>/<alphanumeric string not starting t , other conditions applied>.<alphanumeric string not starting s> then redirecting user's browser go.php parsed filename passed file arguments. err_too_many_redirects due infinite redirect loop. without knowing other rewriterule statements present difficult narrow down exact cause. can narrow down
Read more