如何使用父div上角的复选框将div垂直和水平居中

Question

我正在使用VueJS和Bootstrap开发应用程序。我正在尝试将div与图像居中放置，同时使复选框标签像这样显示在右上角。

但是当将鼠标悬停在卡片上时，图像会向左稍微移动，如下所示：

  .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>

如何确保带有图片的div垂直和水平居中显示，并且复选框与右上角对齐？

我希望对此有所帮助。预先感谢。

Answer 1

您可以在图像div中使用引导类，例如d-flex，align-items-center，justify-content-center，以使其在水平和垂直方向上居中。要将复选框置于右上角，应在position-relative中添加header-rectangle类。在标签中，您应该将样式添加为position: absolute; top: 0; right: 10px，根据输出，您可以对top和right属性值进行一些小的更改。

<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>