通过重叠先前的DIV垂直对齐中间

Question

需要一些CSS修复程序以通过重叠以前的DIV来使图标居中对齐

足迹代码在这里

FirebaseFirestore rootRef = FirebaseFirestore.getInstance();
Query query = rootRef.collection("Users").whereEqualTo("id", 1).whereEqualTo("name", "patryk");
query.get().addOnCompleteListener(new OnCompleteListener<QuerySnapshot>() {
    @Override
    public void onComplete(@NonNull Task<QuerySnapshot> task) {
        if (task.isSuccessful()) {
            List<String> list = new ArrayList<>();
            for (DocumentSnapshot document : task.getResult()) {
                list.add(document.getId());
            }

            for (String id : list) {
                rootRef.collection("Users").document(id).update("name", "New Name").addOnSuccessListener(new OnSuccessListener<Void>() {
                    @Override
                    public void onSuccess(Void aVoid) {
                        Log.d(TAG, "Name Updated!");
                    }
                });
            }
        }
    }
});

请指导我。

Answer 1

对于摘要结果，我已评论.content媒体查询。您可以检查以下更新的代码：

.card-body {
  padding-top: 0!important;
  padding-bottom: 0.5em !important;
  padding-left: 0.5em !important;
  padding-right: 0.5em !important;
}
.card .valign-image-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.card .fa-clock{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*@media screen and (min-width:768px) {
  .content {
    display: none;
  }
}
@media screen and (max-width:767px) {
  .heading {
    display: none;
  }
}*/
@media (min-width: 0px) and (max-width: 544px) { html {font-size: .9rem !important;} }
@media (min-width: 544px) and (max-width: 768px) { html { font-size: .8rem !important; } }
@media (min-width: 768px) and (max-width: 991px) { html { font-size: .9rem !important; } }
@media (min-width: 992px) and (max-width: 1200px) { html { font-size: 1rem !important; } }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">

<div class="container-fluid">
  <div class="card border-dark col-lg-4 col-md-6 col-sm-8 pr-0 pl-0">
     <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-3 text-warning">
           <div class="valign-image-wrapper">
              <i class="far fa-clock fa-4x" aria-hidden="true"></i> 		
           </div>
        </div>
        <div class="col-lg-10 col-md-9 col-sm-9">
           <div class="card-body card-tpstat">
               <div class="f-16 font-weight-bold text-center pb-2">ORDER STATUS
                   <div class="text-warning heading">Attempting to Auto Authorize</div>
               </div>
           </div>
           <div class="heading text-justify">If we are able to automatically authorize your order, we will send you an email confirmation.If we are unable to automatically authorize your order, we will send you an email with an "Authorization Form" and instructions.</div>
           <div class="content pt-3">
               <span class="font-weight-bold text-warning text-justify">Attempting to Auto Authorize</span>
               <i class="fas fa-question-circle form-control-feedback"></i>
           </div>
        </div>        
     </div>
  </div>
</div>