如何将中心的边框动画与文本对齐

Question

我正在使用这个边框动画 https://codepen.io/FlorinCornea/pen/KKpvRYo 但我试图通过将它包装在 bootstrap 中使其响应，但是现在它粘在左边，我似乎无法将它居中

这是我的演示：

.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>

我已经 bootstrap 链接到我的网站，所以这不是问题

这是一张图片，它现在看起来像我正在尝试将蓝色圆圈与它们下方的文本居中对齐：

Answer 1

对于Bootstrap 4:

你用bootstrap，我加3bootstrap类:

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

d-md-flex可以替换为row mx-0

对于bootstrap 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>

如何将中心的边框动画与文本对齐

How do I align my border animation in the center with the text

css

animation

twitter-bootstrap-3

responsive-design

responsive

对于Bootstrap 4:

对于bootstrap 3: