html - 无法使用引导程序将 div 在容器内居中

问题描述

我正在构建一个scorecard我将在屏幕中间的圆圈内描绘总体得分的地方，而细节将在下一行中。

我正在使用引导程序 3，下面是我的代码

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <title>Utora Scorecard</title>
    <style>
        .circle {
          height: 150px;
          width: 150px;
          display: table-cell;
          text-align: center;
          vertical-align: middle;
          border-radius: 50%;
          font-weight: 10px;
          border-width: 3px;
          border-style: solid;
          border-color: red;
          font-size: 30px;
          margin-left: 200%;
    }
    </style>

  </head>

  <body>
    <div class="container">
        <div class="circle">
            57
        </div>

        <div class="row">
            <div class='col-lg-2 col-sm-3'>
             <!-- details of the score card will go in each of the columns -->
            </div>

            <div class="col-lg-2 col-sm-3"> 
            </div>

            <div class="col-lg-2 col-sm-3"> 
            </div>

            <div class="col-lg-2 col-sm-3"> 
            </div>

            <div class="col-lg-2 col-sm-3"> 
            </div>

        </div>

    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   </body>

</html>

这是它在浏览器中的外观

现在我希望这个圆圈位于屏幕中间但无法做到。

我尝试使用text-center,center-block等margin-left，div但没有任何效果。我怎样才能使圆圈居中，即使浏览器大小发生变化，它仍保持在中心？

标签： htmlcsstwitter-bootstrap-3

html - 无法使用引导程序将 div 在容器内居中

问题描述

解决方案

推荐阅读