javascript - 如何使用父 div 顶 Angular 的复选框使 div 垂直和水平居中

Question

我正在使用 VueJS 和 Bootstrap 开发应用程序。我试图将一个 div 与图像居中，同时让复选框标 checkout 现在右上角，如下所示。

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

  .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 等 Bootstrap 类来水平和垂直居中。要将复选框定位在右上角，您应该在 header-rectangle 中添加 position-relative 类。在标签中，您应该将样式添加为 position: absolute;顶部: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>