Вертикальное выравнивание по центру путем наложения предыдущего DIV - PullRequest
Новая
       42

Вертикальное выравнивание по центру путем наложения предыдущего DIV

0 голосов
/ 24 сентября 2018

Нужно исправить CSS, чтобы выровнять значок по центру путем наложения предыдущего DIV

Код маршрута здесь 

<div class="card border-dark col-lg-4 col-md-6 col-sm-8 pr-0 pl-0">
<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 class="row">
        <div class="col-3 col-lg-2 col-md-2 col-sm-2 text-warning p-1"><i class="far fa-clock fa-4x" aria-hidden="true"></i></div>
        <div class="pl-1 pl-md-2 col-9">
            <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>

Пожалуйста, ведите меня.

1 Ответ

0 голосов
/ 26 сентября 2018

Для результата сниппета я прокомментировал .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>
...