如何將中心的邊框影片與文本對齊-有解無憂

我正在使用此邊框影片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/[email protected]/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>

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

這是現在我試圖將藍色圓圈與它們下方的文本居中對齊的影像：如何將中心的邊框影片與文本對齊

uj5u.com熱心網友回復：

對于引導程式 4：

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

d-md-flex（= display:flex 在中等螢屏上）page-wrapper
text-center在你的col-md-3
mx-center（= 邊距水平自動）circle-wrapper

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/484150.html

標籤：css 动画 twitter-bootstrap-3 响应式设计反应灵敏

上一篇：如果第一個值為false，為什么此短路評估回傳未定義？

下一篇：如何在不知道位置的情況下從嵌套的json回傳特定的鍵值對？