Question

我的网页上有圈子代表百分比。圆圈内有一些文字是百分比金额。圆圈下面还有一些文字，简短说明。我能够将所有文本集中在一起。但是，我不能把圈子放在中心位置。我正在使用：

margin-left: auto;
margin-right: auto;

从我在线阅读的内容来看，这是在网站上展示内容的最佳方式，特别是因为它使其具有响应性。我尝试使用圆圈的百分比，但这也无济于事。例如，如果我这样做：

margin-left: 20%;

圆圈看起来居中在iPhone 6上，但不在iPhone 5和4上。

我在下面粘贴更多代码。我希望这能帮助你更好地理解我的问题。

@media (min-width: 768px) and (max-width: 1024px) {
  .ipad-mini-cirlces {
    margin-bottom: 100px;
  }
}
@media (min-width: 1200px) {
  .knob-container canvas {
    width: 100px;
    height: 100px;
  }
}
.circle-text {
  margin-left: 107px;
  width: 200%;
  margin-top: -40px;
  text-align: left;
}
@media (max-width: 479px) {
  .circle-text {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-top: 100px;
    text-align: left;
  }
}
@media (max-width: 479px) {
  .knob-container {
    margin: 27px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    /*margin-left: 60px;*/
  }
}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  .circle-text {
    margin-left: -20px;
    width: 160%;
    margin-top: 114px;
    text-align: left;
  }
}
.knob-container canvas {
  margin-left: 20%;
}

<div class="section clearfix">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="row ipad-mini-cirlces">
          <div class="col-md-4 col-sm-4">
            <div class="knob-container">
              <input class="knob" data-fgcolor="#5cb85c" data-thickness=".1" value="20%" data-displayInput="false" data-readOnly="true">
              <div class="knob-text">
                <span>10-30%</span>
              </div>
              <div class="knob-text circle-text">
                <label>Saved through improved workflow processes <a href="http://bframe.com/software/security/roi-cost-savings/">Find Out More</a>
                </label>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-4">
            <div class="knob-container">
              <input class="knob" data-fgcolor="#5bc0de" data-thickness=".1" value="7.5%" data-displayInput="false" data-readOnly="true">
              <div class="knob-text">
                <span>5-10%</span>
              </div>
              <div class="knob-text circle-text">
                <label>Savings on current cost of reusing of original production material <a href="http://bframe.com/software/security/roi-cost-savings/">Find Out More</a>
                </label>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-4">
            <div class="knob-container">
              <input class="knob" data-fgcolor="#d9534f" data-thickness=".1" value="15%" data-displayInput="false" data-readOnly="true">
              <div class="knob-text">
                <span>10-20%</span>
              </div>
              <div class="knob-text circle-text">
                <label>Savings through a more polished preparation ahead of the edit <a href="http://bframe.com/software/security/roi-cost-savings/">Find Out More</a>
                </label>
              </div>
            </div>
          </div>
        </div>
        <br>
        <div class="row ipad-mini-cirlces">
          <div class="col-md-4 col-sm-4">
            <div class="knob-container">
              <input class="knob" data-fgcolor="#f0ad4e" data-thickness=".1" value="60%" data-displayInput="false" data-readOnly="true">
              <div class="knob-text">
                <span>40-80%</span>
              </div>
              <div class="knob-text circle-text">
                <label>Savings on current cost of distributing media <a href="http://bframe.com/software/security/roi-cost-savings/">Find Out More</a>
                </label>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-4">
            <div class="knob-container">
              <input class="knob" data-fgcolor="#f0ad4e" data-thickness=".1" value="60%" data-displayInput="false" data-readOnly="true">
              <div class="knob-text">
                <span>40-80%</span>
              </div>
              <div class="knob-text circle-text">
                <label>Savings on current cost of distributing media <a href="http://bframe.com/software/security/roi-cost-savings/">Find Out More</a>
                </label>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-4">
            <div class="knob-container">
              <input class="knob" data-fgcolor="#8cc63e" data-thickness=".1" value="60%" data-displayInput="false" data-readOnly="true">
              <div class="knob-text">
                <span>30-50%</span>
              </div>
              <div class="knob-text circle-text">
                <label>Savings on current cost of media storage and handling <a href="http://bframe.com/software/security/roi-cost-savings/">Find Out More</a>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

你的容器必须是全宽（显然）。您的圈子应该是一个块元素（<div>）或display: block;，否则margin: 0 auto;将不会生效

您也可以给自己的圈子display: inline-block;和您的容器text-align: center;

为什么我的圈子不居中？

1 个答案: