Html 水平引导中心内容和推/拉内容

我这里有一个JSFIDLE：

它包含两行，每行有两个单元格，每个单元格包含垂直居中的文本

我需要将白色圆圈与文本水平居中，使其在块中居中

当白色圆圈位于文本上方且块为100%时，这一点尤为重要

我还需要推动或拉动第二行，这样当它断开到100%时，白色圆圈位于文本上方，而不是像现在这样位于上方

        <div class="container">

          <div class="row">
              <div class="block clearfix">

                  <div class="col-sm-4  col-lg-3 col">
                      <div class="circle">
                          <p class="extract extract_percent">50%</p>
                          <p class="extract extract_fact">Some Text</p>
                      </div>
                  </div>

                  <div class="col-sm-8  col-lg-9 col">
                      <div class="text">
                         <p class="fact">More text More text More text More text More text More text More text More text </p>
                      </div>    
                  </div>


                  <div class="col-sm-8  col-lg-9 col">
                      <div class="text">
                         <p class="fact">More text More text More text More text More text More text More text More text </p>
                      </div>    
                  </div>

        <div class="col-sm-4  col-lg-3 col">


        body{
            background: blue;
        }

        .col{
            border: 1px solid red;
        }

        .block{
            display: table;
            height: 120px;
        }

        .block .circle{
            background: white;
            border-radius: 140px;
            display: table-cell;
            vertical-align: middle;
            height: 140px;
            text-align: center;
            width: 140px;
        }
        .extract{
          color: $at-blue-dark;
          margin: 0;
        }

        .extract_percent{
          font-size: 2em;
          font-weight: bold;
        }

        .extract_fact{
          font-size: 1.1em;
        }

        .text{
          display: table-cell;
          vertical-align: middle;
          height: 140px;
        }

        .fact{
            color: white;
        }

50%
一些文本

更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本
更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本
身体{
背景：蓝色；
}
上校{
边框：1px纯红；
}
.街区{
显示：表格；
高度：120px；
}
.街区，圆圈{
背景：白色；
边界半径：140像素；
显示：表格单元格；
垂直对齐：中间对齐；
高度：140像素；
文本对齐：居中；
宽度：140px；
}
.摘录{
颜色：$深蓝色；
保证金：0；
}
.提取百分比{
字号：2em；
字体大小：粗体；
}
.摘录事实{
字体大小：1.1米；
}
.文本{
显示：表格单元格；
垂直对齐：中间对齐；
高度：140像素；
}
.事实{
颜色：白色；
}

用新元素类CSS类包装卷轴类

.center-circle {
 display:table;
}

<div class="center-circle">
    <div class="circle">
                  <p class="extract extract_percent">50%</p>
                  <p class="extract extract_fact">Some Text</p>
    </div>
</div>

。中心圆{
显示：表格；
}
50%
一些文本

将您的类

.block.circle

更改为：

.block .circle {
    background: white;
    border-radius: 140px;
    /*display: table-cell;
    vertical-align: middle;*/
    height: 140px;
    text-align: center;
    width: 140px;
    margin: 0 auto;
}

并添加

填充顶部：35px

至

。提取百分比

或所需的填充：

.extract_percent{
  font-size: 2em;
  font-weight: bold;
  padding-top: 35px;
}

更新

要更改示例中100%宽度上的位置，必须执行以下操作：

更改最后两个

.col

div的顺序。将

.col-sm-push-8

添加到第一个，将

.col-sm-pull-4

添加到最后一个。像这样：

          <div class="col-sm-4  col-lg-3 col col-sm-push-8 col-lg-push-9">
          <div class="circle">
              <p class="extract extract_percent">50%</p>
              <p class="extract extract_fact">Some Text</p>
          </div>
      </div>

      <div class="col-sm-8  col-lg-9 col col-sm-pull-4 col-lg-pull-3">
          <div class="text">
             <p class="fact">More text More text More text More text More text More text More text More text </p>
          </div>    
      </div>

50%
一些文本

更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本

您必须更改div的顺序，因为bootstrap是mobile first，因此您必须首先使用html创建“小”布局，“宽”布局由实用程序类控制，如

.col xx push xx

---

你是说像这样？非常感谢，关于推/拉的任何想法谢谢你的帮助Sebsemillia-代码适用于小尺寸，但如果你将窗口变大，底部的一行就不合适了，移到左边啊，对不起，我更新了我的代码。您还必须为

col lg xx

添加实用程序类。。()