如何將中心的邊框動畫與文本對齊

Question

我正在使用此邊框動畫https://codepen.io/FlorinCornea/pen/KKpvRYo但我試圖通過將其包裝在引導程序中使其響應但現在它粘在左側我似乎無法居中

這是我的演示：

 .circle-wrapper { position: relative; width: 110px; height: 110px; } .icon { position: absolute; color: #fff; font-size: 55px; top: 55px; left: 55px; transform: translate(-50%, -50%); } .circle { display: block; width: 100%; height: 100%; border-radius: 50%; padding: 2.5px; background-clip: content-box; animation: spin 10s linear infinite; } .circle-wrapper:active .circle { animation: spin 2s linear infinite; } .success { background-color: #2e3192; border: 2.5px dashed #2e3192; } .error { background-color: #CA0B00; border: 2.5px dashed #CA0B00; } .warning { background-color: #F0D500; border: 2.5px dashed #F0D500; } @keyframes spin { 100% { transform: rotateZ(360deg); } } .page-wrapper { background-color: #eee; align-items: center; justify-content: center; }

 <link rel="stylesheet" id="bootstrap-css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css?ver=6.0" type="text/css" media="all"> <div class="our-process center-align tinted-bg"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Our Process</h2> </div> <div class="row"> <div class="page-wrapper d-md-flex"> <div class="col-md-3 text-center"> <div class="circle-wrapper mx-auto"> <div class="success circle"></div> <div class="icon"> <span class="glyphicon glyphicon-user"></span> </div> </div> <h5>Assessor's Visit</h5> </div> <div class="col-md-3 text-center"> <div class="circle-wrapper mx-auto"> <div class="success circle"></div> <div class="icon"> <span class="glyphicon glyphicon-user"></span> </div> </div> <h5>Surveyor's Visit</h5> </div> <div class="col-md-3 text-center"> <div class="circle-wrapper mx-auto"> <div class="success circle"></div> <div class="icon"> <span class="glyphicon glyphicon-user"></span> </div> </div> <h5>installation</h5> </div> <div class="col-md-3 text-center"> <div class="circle-wrapper mx-auto"> <div class="success circle"></div> <div class="icon"> <span class="glyphicon glyphicon-user"></span> </div> </div> <h5>Post Inspection Visit</h5> </div> </div> </div> </div> </div> </div>

我已將引導程序鏈接到我的網站，所以這不是問題

這是現在我試圖將藍色圓圈與它們下方的文本居中對齊的圖像：

Answer 1

對於引導程序 4：

當您使用引導程序時，我添加了 3 個引導程序類：

• page-wrapper上的d-md-flex (= display:flex on medium screen)
• col-md-3上的text-center
• circle-wrapper上的mx-center （= 邊距水平自動）

d-md-flex可以替換為row mx-0

對於引導程序 3：

您只需要創建缺少的 css 類：

@media (min-width: 768px){
  .d-md-flex {
      display: -webkit-box!important;
      display: -ms-flexbox!important;
      display: flex!important;
  }
}
.mx-auto{
  margin-right:auto !important;
  margin-left:auto !important;
}

在大屏幕上檢查它應該居中。

 .circle-wrapper { position: relative; width: 110px; height: 110px; } .icon { position: absolute; color: #fff; font-size: 55px; top: 55px; left: 55px; transform: translate(-50%, -50%); } .circle { display: block; width: 100%; height: 100%; border-radius: 50%; padding: 2.5px; background-clip: content-box; animation: spin 10s linear infinite; } .circle-wrapper:active .circle { animation: spin 2s linear infinite; } .success { background-color: #2e3192; border: 2.5px dashed #2e3192; } .error { background-color: #CA0B00; border: 2.5px dashed #CA0B00; } .warning { background-color: #F0D500; border: 2.5px dashed #F0D500; } @keyframes spin { 100% { transform: rotateZ(360deg); } } .page-wrapper { background-color: #eee; align-items: center; justify-content: center; } /************************************/ /** BOOTSTRAP 4 CSS ADDED **/ /************************************/ @media (min-width: 768px){ .d-md-flex { display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important; } } .mx-auto{ margin-right:auto !important; margin-left:auto !important; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha512-6MXa8B6uaO18Hid6blRMetEIoPqHf7Ux1tnyIQdpt9qI5OACx7C+O3IVTr98vwGnlcg0LOLa02i9Y1HpVhlfiw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="page-wrapper d-md-flex"> <div class="col-md-3 text-center"> <div class="circle-wrapper mx-auto"> <div class="success circle"></div> <div class="icon"> <span class="glyphicon glyphicon-user"></span> </div> </div> <h5>Assessor's Visit</h5> </div> <div class="col-md-3 text-center"> <div class="circle-wrapper mx-auto"> <div class="success circle"></div> <div class="icon"> <span class="glyphicon glyphicon-user"></span> </div> </div> <h5>Surveyor's Visit</h5> </div> <div class="col-md-3 text-center"> <div class="circle-wrapper mx-auto"> <div class="success circle"></div> <div class="icon"> <span class="glyphicon glyphicon-user"></span> </div> </div> <h5>installation</h5> </div> <div class="col-md-3 text-center"> <div class="circle-wrapper mx-auto"> <div class="success circle"></div> <div class="icon"> <span class="glyphicon glyphicon-user"></span> </div> </div> <h5>Post Inspection Visit</h5> </div> </div>