Question

我在这里有一个jsfiddle：http://jsfiddle.net/hnfdf9y1/1/

这两行包含2个单元格，每个单元格包含垂直居中的文本。

我需要将白色圆圈与文本中心对齐，以便它居中于它的块

当白色圆圈位于文本上方且块数为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;
        }

Answer 1

使用新元素类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>

Answer 2

将您的班级.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;
}

并将padding-top: 35px;添加到.extract_percent或您想要的填充：

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

Working Example

<强>更新

要在示例中更改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>

你必须改变div的顺序，因为bootstrap是首先移动，所以你必须让你的＆＃34;小＆＃34;布局首先使用html和＆＃34; wide＆＃34;布局由实用程序类控制，如.col-xx-push-xx。

Working Example

水平Bootstrap中心内容和推/拉内容

2 个答案: