How to center a div vertically and horizontally with a checkbox on the top corner of parent div

Question

I am developing an application using VueJS and Bootstrap. I am trying to center a div with an image and at the same time have the checkbox label appear on the top right like this.

But when hovered over the card, the image moves slightly towards it's left, like this:

  .file-name-style{ height: 26px; color: #424242; font-family: 'Source Sans Pro'; font-size: 15px; font-weight: normal; font-style: normal; text-decoration: none; text-align: left; padding: 5px 15px; } .file-size-style{ height: 26px; color: #9E9E9E; font-family: 'Source Sans Pro'; font-size: 12px; text-align: left; line-height: 1px; padding: 10px 15px; } .header-rectangle { height: 155px; background: #F5F5F5; border: 1px solid #E0E0E0; border-radius: 0px; border-bottom: none; } .footer-rectangle { height: 65px; background: #FAFAFA; border: 1px solid #E0E0E0; border-radius: 0px; vertical-align:middle; text-align:center; } 

 <div v-for="(item, index) in recentFiles" @mouseover="showByIndexRecent = index" @mouseout="showByIndexRecent = null" class="col-xs-5ths col-sm-5ths col-md-5ths col-lg-5ths"> <stats-card> <div slot="header" class="header-rectangle" > <!-- @contextmenu.prevent="$refs.menu.open" --> <div> <label class="form-checkbox" v-show="showByIndexRecent === index || recentlySelectedFiles.includes(item.name)" style="margin-top: 8px;float: right;margin-right: 10px;margin-left: 0px;"> <input type="checkbox" :value="item.name" v-model="recentlySelectedFiles[index]" style="height:16px; width:16px;"> <i class="form-icon"> </i> </label> </div> <div style="margin-left: 25px;"> <img :src="item.source" style=" height: 50px; margin-top: 50px"> </div> </div> <div slot="footer" class="footer-rectangle" style="display: flex; flex-direction: column; justify-content: center;"> <!-- @contextmenu.prevent="$refs.menu.open" --> <div class="row" > <div class="col-9" style="display: flex;flex-direction: column;justify-content: center;"> <div class="file-name-style"> <span>{{item.name}}</span> </div> <div class="file-size-style" > <span>{{item.size}} MB</span> </div> </div> <div class="col-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:"> <div v-show="!item.shared" style="float: right; padding: 0px 5px 5px 0px; margin-right: 10px;"> <i class='fas fa-users' id="image"></i> </div> </div> </div> </div> </stats-card> </div> 

How to make sure that the div with the image appears center vertically and horizontally with the checkbox aligned to the top right?

I'd love some help on it. Thanks in advance.

Answer 1

You can use bootstrap classes like d-flex , align-items-center , justify-content-center in the image div to center it horizontally and vertically. To position the checkbox at top right, you should add position-relative class in the header-rectangle . In the label you should add style as position: absolute; top: 0; right: 10px position: absolute; top: 0; right: 10px position: absolute; top: 0; right: 10px , based on your output you can make some little changes to top and right properties values.

<div v-for="(item, index)  in recentFiles" @mouseover="showByIndexRecent = index" @mouseout="showByIndexRecent = null" class="col-xs-5ths col-sm-5ths col-md-5ths col-lg-5ths">
  <stats-card>
      <div slot="header" class="header-rectangle position-relative" >
          <!-- @contextmenu.prevent="$refs.menu.open" -->
          <div>
              <label class="form-checkbox" v-show="showByIndexRecent === index || recentlySelectedFiles.includes(item.name)" style="position: absolute; top: 0; right: 10px">
                  <input type="checkbox" :value="item.name" v-model="recentlySelectedFiles[index]" style="height:16px; width:16px;">
                  <i class="form-icon">
                  </i>
              </label>
          </div>

          <div class="d-flex align-items-center justify-content-center">
              <img :src="item.source" style=" height: 50px;">
          </div>

      </div>
      <div slot="footer" class="footer-rectangle" style="display: flex; flex-direction: column; justify-content: center;">
          <!-- @contextmenu.prevent="$refs.menu.open"  -->
          <div class="row" >
              <div class="col-9"  style="display: flex;flex-direction: column;justify-content: center;">
                  <div class="file-name-style">
                      <span>{{item.name}}</span>
                  </div>
                  <div class="file-size-style" >
                      <span>{{item.size}} MB</span>
                  </div>
              </div>
              <div class="col-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:">
                  <div v-show="!item.shared" style="float: right; padding: 0px 5px 5px 0px; margin-right: 10px;">
                      <i class='fas fa-users' id="image"></i>
                  </div>
              </div>
          </div>
      </div>
  </stats-card>
  </div>