html - 为什么我的圈子不居中？

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

您的容器必须是全宽(很明显)。你的圈子应该是一个 block 元素( <div> )或 display: block;否则margin: 0 auto;不会生效

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